Ленивая загрузка не отображается на экране img - PullRequest
Новая
       2

Ленивая загрузка не отображается на экране img

0 голосов
/ 01 февраля 2019

Я использую следующий код js для отложенной загрузки на моем сайте, он отлично работает для закадровых изображений, но я хочу добавить условие, что даже если img находится на экране, оно должно работать, сейчас оно не показывает мое первое изображениено работает на второй. 

  // Lazy Load Start
  document.addEventListener("DOMContentLoaded", function()
  {
    var e, n = document.querySelectorAll(".lazy");

    function t()
    {
      e && clearTimeout(e), e = setTimeout(function()
      {
        for (var e = window.pageYOffset, o = 0; o < n.length; o++) n[o].offsetTop < window.innerHeight + e && (n[o].src = n[o].dataset.src, n[o].classList.remove("lazy"));
        0 == n.length && (document.removeEventListener("scroll", t), window.removeEventListener("resize", t), window.removeEventListener("orientationChange", t))
      }, 20)
    }
    document.addEventListener("scroll", t), window.addEventListener("resize", t), window.addEventListener("orientationChange", t)
  });
  // Lazy Load End
h2{
margin-bottom: 50px
}
<div class="content txt">
  <p class="img"><img class="lazy" alt="Missing Img" data-src="https://via.placeholder.com/350x150"></p>
  <h2 class="h1">Go Down</h2>
  <h2 class="h1">Go Down</h2>
  <h2 class="h1">Go Down</h2>
  <h2 class="h1">Go Down</h2>
  <h2 class="h1">Go Down</h2>
  <h2 class="h1">Go Down</h2>
  <h2 class="h1">Go Down</h2>
  <h2 class="h1">Go Down</h2>
  <h2 class="h1">Go Down</h2>
  <h2 class="h1">Go Down</h2>
  <h2 class="h1">Go Down</h2>
  <h2 class="h1">Go Down</h2>
  <h2 class="h1">Go Down</h2>
  <p class="img"><img class="lazy" data-src="https://via.placeholder.com/350x150"></p>
</div>

1 Ответ

0 голосов
/ 01 февраля 2019

Все, что вам нужно, это только один раз загрузить функцию t: 

    document.addEventListener("DOMContentLoaded", function() {
        var e, n = document.querySelectorAll(".lazy");

        function t() {
            e && clearTimeout(e), e = setTimeout(function() {
                for (var e = window.pageYOffset, o = 0; o < n.length; o++) n[o].offsetTop < window.innerHeight + e && (n[o].src = n[o].dataset.src, n[o].classList.remove("lazy"));
                0 == n.length && (document.removeEventListener("scroll", t), window.removeEventListener("resize", t), window.removeEventListener("orientationChange", t))
            }, 20)
        }
        t(); // just call
        document.addEventListener("scroll", t), window.addEventListener("resize", t), window.addEventListener("orientationChange", t)
    });
    <div class="content txt">
        <p class="img"><img class="lazy" alt="Missing Img" data-src="https://via.placeholder.com/350x150"></p>
            <h2 class="h1">Go Down</h2>
            <h2 class="h1">Go Down</h2>
            <h2 class="h1">Go Down</h2>
            <h2 class="h1">Go Down</h2>
            <h2 class="h1">Go Down</h2>
            <h2 class="h1">Go Down</h2>
            <h2 class="h1">Go Down</h2>
            <h2 class="h1">Go Down</h2>
            <h2 class="h1">Go Down</h2>
            <h2 class="h1">Go Down</h2>
            <h2 class="h1">Go Down</h2>
            <h2 class="h1">Go Down</h2>
            <h2 class="h1">Go Down</h2>
            <p class="img"><img class="lazy" data-src="https://via.placeholder.com/350x150"></p>
    </div>
...