img.lazy - Ленивая загрузка медиаконтента /

В наше время когда сайты переполнены  медиа контентом типа видео и картинок, очень важно чтобы страничка грузилась быстро. Для этого можно применить так званую ленивую загрузку. Как для видео так и для картинок.

Есть довольно много библиотек. Как хороший так и не очень. 

Ниже представлено легкий скрипт на чистом js. Картинки или видео будут подгружаться только при прокрутке страницы к этому контенту .

Пример 

<img class="lazy" data-src="files/icons/3.jpg" alt="">

Сам скрипт  

<script>
document.addEventListener("DOMContentLoaded", function() {
  var lazyloadImages = document.querySelectorAll(".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);
});
</script>