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

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