Довольно часто необходимо для Google Pagespeed (Lighthouse) сделать быстро и без лишних библиотек отложенную загрузку изображений, которых выводятся через background-image, например имеем следующую конструкцию:
<div style='background-image: url("/social.png");'></div>
Чтобы отложить загрузку на определенное время используем простой вариант с использованием Javascript:
$(window).load(function(){
setTimeout(() =>
$('.delayed).each(function() {
var delayed = $(this);
var src = delayed.attr('data-back');
delayed.css('background-image', 'url("'+src+'")');
})
, 1500);
});
В таком случае исходный html блок будет выглядеть следующим образом:
<div class="delayed" data-back=”/social.png”></div>
Теперь изображение будет загружаться с отсрочкой в 1,5 секунды после загрузки страницы.
Рассмотрим, что делает js код:
$(window).load(function(){ // Ждем пока загрузится страница
setTimeout(() => // Начало функции отложенного запуска
$('.delayed).each(function() { // Находим все элементы с class=”delayed” и проходим по ним
var delayed = $(this); // Присваиваем текущий перечисляемый элемент переменной
var src = delayed.attr('data-back'); // Присваиваем данному переменной значение атрибута data-back, в котором содержится путь до файла изображения
delayed.css('background-image', 'url("'+src+'")'); // Добавляем текущему элементу background-image с его изображением
})
, 1500); // Время через которое выполнится код в миллисекундах.
});
Данный способ не является универсальным на все случаи и не является ленивой загрузкой, но хорошо подходит, когда нужно быстро решить проблему с тем, что Goggle Pagespeed ругается на то, что необходимо отложить загрузку одного или нескольких фоновых изображений.