Ленивая загрузка динамически отображаемых изображений?

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