Question

我正在使用while循环从数据库中显示图像，并且我一直在尝试寻找一种方法来延迟加载那些动态显示的图像。

document.addEventListener("DOMContentLoaded", function() {
  var lazyloadImages = document.querySelectorAll("img.lazy");    
  var lazyloadThrottleTimeout;

  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);
});

我总是面临着同样的问题：在我开始滚动之前，图像不会加载。这意味着第一张图片应该正常显示（即没有延迟加载），但是我无法弄清楚该如何实现，因为它们都在同一循环中显示。

我一直在搜索，但是一旦访客开始滚动，所有教程/脚本都会显示内容。

是否有关于如何执行此操作的教程（或脚本）？

Answer 1

您可以放置诸如标记之类的东西，以使一些图像最初加载到data- *属性中。因此，将属性像这样放置到您的图片中，

<img data-initial="true" >

然后，将此代码添加到ready函数中，以使其最初加载

lazyloadImages.forEach(function(img){
 if($(img).data('initial')){
  img.src = img.dataset.src;
  img.classList.remove('lazy');
 }
}

延迟加载动态显示的图像？

1 个答案: