Question

我正在使用以下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>

Answer 1

所有您需要的只是加载您的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>

懒加载未显示在屏幕上img

1 个答案: