hello@kakorin.com

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

php
2 окт 2019

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

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

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

    • В атрибут data-src помещаем изображение которое должно быть когда блок войдет в поле экрана

    • В атрибут data-srcset помещаем сэт изображений для разных экранов

    Итого:

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

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

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

    • В момент загрузки страницы забирает все изображения с атрибутом 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);
        });
    }