Делаем отложенную загрузку изображений

В статье будет описано как сделать отложенную загрузку изображений или как её еще называют LazyLoad. Пример будет даваться к сайтам на WordPress, но все это применимо для любых других сайтов.

Зачем нужна отложенная загрузка изображений? Для того чтобы страница грузилась быстро. К тому же сегодня это влияет на показатели Google PageSpeed Insight.

1.

Гуглим и скачиваем скрипт lazyload.min.js.

2.

Подключаем его в нашей теме:

wp_enqueue_script(
    'lazyload-min',
     '/js/' . 'lazyload.min.js',
    [],
    false, true
);

3.

На своих изображениях меняем тег src на data-src

4.

Подключаем еще один файл js или если он уже есть, добавляем в него код:

window.lazyLoadInstance = new LazyLoad({
    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 и вернем обратно.

Если кратко, то это так:

$title = get_the_title($post->ID);

$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;

Привет. Ты находишься на моём сайте. Я разработчик. Здесь я делюсь своими наработками и знаниями. Спрашивай в комментариях, если тебе что-то не понятно или пиши, если есть что добавить.

Если вам пригодилась информация, вы можете поблагодарить автора сайта символическим пожертвованием:

Добавить комментарий

Напишите свой комментарий, если вам есть что добавить/поправить/спросить по теме текущей статьи: "Делаем отложенную загрузку изображений"
Если вам нужно добавить участок кода ставьте его между тегами <code></code>