延遲加載動態顯示的圖像？

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