Супербыстрый хостинг на SSD от 165р в месяц   •   Реклама
3 008 просм
6 комм
Поделиться:

Lazy Load 2.0 – ленивая (отложенная) загрузка изображений на JavaScript

Если вам доводилось сталкиваться с PageSpeed Insights – инструментом по анализу скорости загрузки сайта от компании Google, то вы могли наблюдать в нем сообщение вида «Отложите загрузку скрытых изображений». Что это и зачем Google рекомендует внедрить эту технологию на ваш сайт?

Все дело в том, что когда человек заходит на ваш сайт, первое, что он видит, это первый (ключевой) экран сайта – ту область от начала (самого верха) вашего сайта, что умещается на его мониторе. Что идет ниже – он пока не видит, и может не увидеть в принципе (по своему желанию или другим причинам).

К чему я все это рассказываю? Если на вашем сайте большое количество изображений, все они будут грузиться, независимо от того, видит их пользователь или нет, что, в свою очередь, добавляет лишние секунды к времени полной загрузки страниц вашего сайта.

Чтобы не заставлять человека ждать и максимально быстро предоставить ему информацию, в которой он нуждается, и существует чудесный плагин под названием «Lazy Load». Он позволяет подгружать изображения по мере прокрутки страницы, когда они начинают попадать в область видимости.

Первые версии плагина, автором которого, кстати говоря, является Мика Туупола, были реализованы с использованием jQuery. В этой же статье я покажу вам свежую версию плагина (Remastered, как называет ее сам автор) на чистом JavaScript.

Инструкция по установке Lazy Load 2.0 на сайт

Итак, все как обычно.

1. Скачайте архив в конце статьи, разархивируйте и содержимое загрузите на ваш сайт удобным для вас способом.

2. Далее в секцию HEAD на всех страницах вашего сайта подключите ранее загруженный скрипт:

<script src="/js/lazyload.js"></script>

Не забывайте корректно прописывать адрес до скрипта на вашем сайте.

3. Перед закрывающим тегом </body> вы вставляете скрипт вызова плагина:

<script>

	let images = document.querySelectorAll("img");
	lazyload(images);

</script>

«img» здесь означает, что «лениво» загружаться будут все изображения. Можно поставить ограничение в виде определенного CLASS или ID.

4. Затем (не обязательно, но желательно), в секцию HEAD (обязательно в нее, а не в другое место или отдельный файл стилей) вставьте следующие правила:

<style>
	img[data-src] {
		opacity: 0 !important;
	}

	img[src] {
		opacity: 1 !important;
	}
</style>

Они позволят вам скрыть пока пустые теги img и показать их тогда, когда скрипт подгрузил их содержимое.

Для того чтобы более точно понимать принцип работы этого дополнения, рекомендую проверить ваш сайт с этими правилами и без них с обязательной очисткой кеша браузера при каждой проверке.

5. Пятый и он же, по сути, завершающий шаг. Здесь вам необходимо изменить принцип вставки изображения на сайт.

Стандартная конструкция вставки изображения в HTML выглядит так:

<img class="logo_style" src="/logo-big.png" alt="Наш логотип" />

Различия с кодом ваших изображений могут быть лишь в разного рода атрибутах. Главное здесь то, что ранее используемый атрибут «src» вы заменяете на «data-src»:

<img class="logo_style" data-src="/logo-big.png" alt="Наш логотип" />

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

По желанию можно не удалять атрибут «src» и прописывать в нем ссылку до превью (уменьшенной копии):

<img class="logo_style" src="/logo-small.png" data-src="/logo-big.png" alt="Наш логотип" />

Соответственно, в таком случае до загрузки полного изображения будет показываться его превью.

Предвидя ваш вопрос «У меня куча изображений на сайте, мне что теперь, все руками изменять?», отвечу – я придумал один способ, как можно автоматизировать этот процесс.

Автоматическое изменение кода изображений для Lazy Load 2.0

Как я уже сказал чуть выше, есть несложный способ, который позволяет автоматически изменить необходимый атрибут у изображений.

Для этого на все страницы вашего сайта (если вы используете CMS, то в главный файл, чаще всего это файл index.php) в самый верх вставьте код:

function lazyload_img($buffer) {

	return preg_replace('#<img([^>]*) src="(.*?)"([^>]*)>#', '<img$1 data-src="$2"$3>', $buffer);
	
} 

ob_start("lazyload_img");

Обратите внимание: на вашем сайте должна быть поддержка PHP. Приведенный скрипт ищет все изображения на странице и заменяет им атрибут «src» на «data-src».

Это все, что я хотел рассказать вам касаемо плагина «Lazy Load». Если остались вопросы – пишите об этом в комментариях под данной статьей.

ФайлРазмерСсылка
6
комментариев
Гостям запрещено участвовать в обсуждениях сайта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.
Администратор  |  732

Артём Ройзман, Здравствуйте. Насколько я знаю, этот вариант скрипта работает только с изображениями вставленными через тег img.

Позже рассмотрим более функциональный вариант.

16.08 в 19:34
  • 0
Пользователь  |  1

Артем, все делал по вашей инструкции. Спасибо! А как для background image (фоновая картинка с параллаксом в блоке на лендинге) это реализовать?

пример кода:

<div class="bg parallax-bg" data-top-bottom="transform:translate3d(0px, 25%, 0px)" data-bottom-top="transform:translate3d(0px, -25%, 0px)"></div>

и второй вопрос можно ли использовать для iframe, как тогда в этом случае прописать пункт 3 вашей инструкции?

16.08 в 18:08
  • 0
Администратор  |  732

Артём Ройзман, я думаю, что особой разницы нет. Вариант из статьи более универсальный. А так, это не единственная существующая реализация Lazy Load.

18.06 в 01:06
  • 0
Проверенный  |  12

Есть разница этого плагина и того что использует DLE?

17.06 в 21:31
  • 0
Администратор  |  732

Роман, покажите сайт где наблюдается проблема.

Но насколько я знаю, он работает со всеми популярными форматами.

1.06 в 20:44
  • 0
Пользователь  |  1

Заметил что этот Lazy Load с изображениями формата jpg не работает. С png без проблем. Можно как то исправить ?

1.06 в 00:27
  • 0
Подняться наверх
«Pandoge» - помощник веб-мастера