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

lazy - загрузка видео и картинок для быстрой загрузки странички

13 / 08 / 2019 33 seo Aвтор: Фрилансер
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>

 

3 случайных Поста

Card image cap
Как спарсить погоду с sinoptik и отправить через бота телеграмм
Card image cap
Contact form 7- редирект на страницы при разных значения полей-
Card image cap
Woocommerce "Нет в наличие"

коммент.

© SiteBlog designer