В статье будет описано как сделать отложенную загрузку изображений или как её еще называют LazyLoad. Пример будет даваться к сайтам на WordPress, но все это применимо для любых других сайтов.
Зачем нужна отложенная загрузка изображений? Для того чтобы страница грузилась быстро. К тому же сегодня это влияет на показатели Google PageSpeed Insight.
1.
Гуглим и скачиваем скрипт lazyload.min.js.
2.
Подключаем его в нашей теме:
'lazyload-min',
'/js/' . 'lazyload.min.js',
[],
false, true
);
3.
На своих изображениях меняем тег src на data-src
4.
Подключаем еще один файл js или если он уже есть, добавляем в него код:
elements_selector: ".wp-post-image, img",
thresholds: "800px 10%",
});
Внутри кода перечисляем классы или теги на которые мы хотим повесить lazyLoad.
Как добавить lazyload на get_the_post_thumbnail
Приведу пример как поставить отложенную загрузку на миниатюры WordPress.
Миниатюры выводит функция get_the_post_thumbnail(). Мы передадим в переменную содержимое этой функции. Произведем замену в ней src на data-srcset, а srcset на data-srcset и вернем обратно.
Если кратко, то это так:
$arr = [
'title' => esc_attr($title),
'alt' => esc_attr($title),
];
$imgHtml = get_the_post_thumbnail($post->ID, 'thumb_small', $arr);
// Добавляем LazyLoad
$imgLazyLoad = str_replace('src=', 'data-src=', $imgHtml);
$imgLazyLoad = str_replace('srcset=', 'data-srcset=', $imgLazyLoad);
echo $imgLazyLoad;
