Question

我正在使用此脚本来延迟加载标签，我对其中的大多数内容都很熟悉，但是有一段我不太确定

   document.addEventListener("DOMContentLoaded", function() {
     var lazyloadImages;

     if ("IntersectionObserver" in window) {
       lazyloadImages = document.querySelectorAll(".lazy");
       var imageObserver = new IntersectionObserver(function(entries, observer) {
         entries.forEach(function(entry) {
           if (entry.isIntersecting) {
             var image = entry.target;
             image.src = image.dataset.src;
             image.classList.remove("lazy");
             imageObserver.unobserve(image);
           }
         });
       });

       lazyloadImages.forEach(function(image) {
         imageObserver.observe(image);
       });
     } else {
       var lazyloadThrottleTimeout;
       lazyloadImages = document.querySelectorAll(".lazy");

       function lazyload () {
         if(lazyloadThrottleTimeout) {
           clearTimeout(lazyloadThrottleTimeout);
         }

         lazyloadThrottleTimeout = setTimeout(function() {
           var scrollTop = window.pageYOffset;
           lazyloadImages.forEach(function(img) {
               if(img.offsetTop < (window.innerHeight + scrollTop)) {
                 img.src = img.dataset.src;
                 // img.classList.remove('lazy');
               }
           });
           if(lazyloadImages.length == 0) {
             document.removeEventListener("scroll", lazyload);
             window.removeEventListener("resize", lazyload);
             window.removeEventListener("orientationChange", lazyload);
           }
         }, 20);
       }

       document.addEventListener("scroll", lazyload);
       window.addEventListener("resize", lazyload);
       window.addEventListener("orientationChange", lazyload);
     }
   })

当前，如果进入视口底部，它将加载<img>。我希望它可以预先加载img，例如在查看端口下方200px-300px，这样用户就不会看到加载。

我认为这与这部分有关

if(img.offsetTop < (window.innerHeight + scrollTop))

我不知道这些值的含义，所以我不确定如何指定在200px之前启动延迟加载。

欢呼

Answer 1

尝试一下：

if(img.offsetTop < (window.innerHeight + scrollTop + 250))

延迟加载检测上的视口增加

1 个答案: