Когда нам нужна отложенная загрузка?

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

Вот несколько методов, в которых может быть полезна отложенная загрузка, а также примеры кода:

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

<img src="placeholder.jpg" data-src="image.jpg" class="lazy-load-image">

document.addEventListener("DOMContentLoaded", function() {
  const lazyLoadImages = document.querySelectorAll(".lazy-load-image");

  const options = {
    rootMargin: "0px",
    threshold: 0.1
  };

  const imageObserver = new IntersectionObserver(function(entries, observer) {
    entries.forEach(function(entry) {
      if (entry.isIntersecting) {
        const image = entry.target;
        image.src = image.dataset.src;
        image.classList.remove("lazy-load-image");
        imageObserver.unobserve(image);
      }
    });
  }, options);

  lazyLoadImages.forEach(function(image) {
    imageObserver.observe(image);
  });
});

2. Отложенная загрузка видео.
   Видео может существенно замедлять загрузку страниц из-за большого размера файлов. Отложенная загрузка видео позволяет отложить загрузку видео до тех пор, пока пользователь не начнет с ним взаимодействовать, например нажимать кнопку воспроизведения.

<video controls poster="placeholder.jpg" data-src="video.mp4" class="lazy-load-video"></video>

document.addEventListener("DOMContentLoaded", function() {
  const lazyLoadVideos = document.querySelectorAll(".lazy-load-video");

  const options = {
    rootMargin: "0px",
    threshold: 0.1
  };

  const videoObserver = new IntersectionObserver(function(entries, observer) {
    entries.forEach(function(entry) {
      if (entry.isIntersecting) {
        const video = entry.target;
        video.src = video.dataset.src;
        video.load();
        video.classList.remove("lazy-load-video");
        videoObserver.unobserve(video);
      }
    });
  }, options);

  lazyLoadVideos.forEach(function(video) {
    videoObserver.observe(video);
  });
});

3. Скрипты отложенной загрузки.
   Скрипты отложенной загрузки позволяют загружать файлы JavaScript только тогда, когда они необходимы, сокращая начальное время загрузки страницы. Это особенно полезно для скриптов, которые не критичны для первоначального рендеринга страницы.

<script src="lazy-script.js" defer></script>

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

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