Справочники, инструменты, документация

PHP: Отложенная загрузка изображения для Google Speed

Задача: выполнить требование Google Speed - отложите загрузку скрытых изображений.

Разметка страницы:

  • В место изображения в атрибут src указываем любое небольшое изображение. Мы в идеале видим там тоже самое изображение с размытым эффектом и в ужасном качестве (главное чтобы такое изображение весило очень мало).
  • В атрибут data-src помещаем изображение которое должно быть когда блок войдет в поле экрана.
  • В атрибут data-srcset помещаем сэт изображений для разных экранов.

Итого:

<img src="placeholder.jpg" data-src="img.jpg" data-srcset=img.jpg 1x" >

где: img.jpg - необходимое изображение, placeholder.jpg - небольшое изображение.

Теперь сам скрипт, как он работает:

  • В момент загрузки страницы забирает все изображения с атрибутом data-src.
  • В момент появления изображения в поле экрана заменяет атрибут src значением из атрибута data-src, аналогично с srcset и data-srcset.

Итого:

var lazyImages = [].slice.call(document.querySelectorAll("img[data-src]"));
if ("IntersectionObserver" in window) {
  let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
    entries.forEach(function(entry) {
      if (entry.isIntersecting) {
        let lazyImage = entry.target;
        lazyImage.src = lazyImage.dataset.src;
        lazyImage.srcset = lazyImage.dataset.srcset;
        lazyImage.removeAttribute("data-src");
        lazyImage.removeAttribute("data-srcset");
        lazyImageObserver.unobserve(lazyImage);
      }
    });
  });
  lazyImages.forEach(function(lazyImage) {
    lazyImageObserver.observe(lazyImage);
  });
}