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

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

0 голосов
/ 08 октября 2018

Я отображаю изображения из своей базы данных, используя цикл 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);
});

Я всегда сталкиваюсь ста же проблема: изображения не будут загружаться, пока я не начну прокручивать.Это означает, что первые изображения должны отображаться нормально (т. Е. Без отложенной загрузки), но я не мог понять, как этого добиться, поскольку все они отображаются в одном цикле.

Я искалдля чего-то, но все учебники / сценарии отображают контент, как только посетитель начинает прокручивать.

Есть ли какой-нибудь учебник (или сценарий) о том, как это сделать?

1 Ответ

0 голосов
/ 08 октября 2018

Вы можете поместить что-то вроде флага, чтобы некоторые изображения были изначально загружены в атрибут data- *.Следовательно, поместите атрибут на ваше изображение следующим образом: 

<img data-initial="true" >

Затем добавьте этот код в функцию ready, чтобы они изначально загружались 

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