Ленивая загрузка изображений

Ленивая загрузка изображений — это техника оптимизации загрузки веб-страниц, при которой изображения загружаются только когда они видимы на экране пользователя, вместо того, чтобы загружать все изображения сразу при открытии страницы.

Пример: У вас есть длинная веб-страница с большим количеством изображений. Вместо того, чтобы все изображения загружались сразу, они будут загружаться по мере прокрутки страницы.

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

Таким образом, ленивая загрузка изображений помогает сократить время загрузки страницы и улучшить производительность, особенно если страница содержит много больших изображений.

HTML:

    <div class="gallery">
        <img src="i/cat_01.jpg" alt="Image 1" width="800" height="600" loading="lazy" >
        <img src="i/cat_02.jpg" alt="Image 2" width="800" height="600" loading="lazy" >
        <img src="i/cat_03.jpg" alt="Image 3" width="800" height="600" loading="lazy" >
        <img src="i/cat_04.jpg" alt="Image 4" width="800" height="600" loading="lazy" >
        .....
        <img src="i/cat_20.jpg" alt="Image width="800" height="600" loading="lazy" >
    </div>

.......

Также можно подключить и JavaScript:

HTML:

    <img class="lazyload" data-src="путь_к_изображению.jpg" alt="Описание изображения">

JavaScript:

    document.addEventListener("DOMContentLoaded", function() {
        var lazyloadImages = document.querySelectorAll(".lazyload");
      
        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('lazyload');
              }
            });
            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);
      });
      
      CSS:
      
      .lazyload {
        opacity: 0;
        transition: opacity 300ms;
      }
      
      .lazyload.loaded {
        opacity: 1;
      }

CSS:

    .lazyload {
        opacity: 0;
        transition: opacity 300ms;
      }
      
      .lazyload.loaded {
        opacity: 1;
      }

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