Задача: выполнить требование гугл спида - отложите загрузку скрытых изображений.
Разметка страницы:
В место изображения в атрибут 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);
});
}