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

Для улучшения производительности и скорости загрузки сайта lazyload (ленивая загрузка картинок) играет одну из главных ролей.

Сделать такую загрузку при помощи javascript довольно просто. Все, что нам надо, это лишь повесить эвент отслеживание области видимости при помощи обсервера (Observer).

HTML структура

Для начала создадим дом элементы для картинок добавив на страницу тэги <img> без атрибута src. Ссылка на картинку у нас будет хранится в кастомном атрибуте data-src.

Либо мы можем оставить src и добавим туда например ссылку на спиннер.

<img data-src="ссылка на файл с картинкой" alt="картинка" />

Javascript Lazyload

Создаем обсервер для картинок.

const imagesObserverAction = new IntersectionObserver(
  (entries, observer) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.src = entry.target.dataset.src;
        observer.unobserve(entry.target);
      }
    });
  },
  {
    rootMargin: "30px"
  }
);

Что собственно мы тут делаем, это проверяем попала ли картинка в область видимости (viewport), если да то меняем атрибут src на ссылку из атрибута data-src.

observer.unobserve(entry.target) — После чего убираем отслеживание с цели.

Но, что-бы картинки начали загружаться заранее, во второй параметр IntersectionObserver мы передадим отступ видимости в 30px.

Это означает, что когда до области видимости картинки останется расстояние в 30px, скрипт начнет свою работу.

Теперь нам надо найти все изображения на странице и навесить на них наш обсервер.

document.querySelectorAll("img").forEach((img) => imagesObserverAction.observe(img));

В идеале картинки искать по классу, это будет быстрее и правильнее.