Безлимитный хостинг на сверхбыстрых SSD-дисках от 57р в месяц   •   Реклама
4 227 просм
10 комм
Поделиться:

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> вы вставляете скрипт вызова плагина и стиль для скрытия отложенных изображений при отключенном в браузере JavaScript:

<noscript>
		
	<style>
		img[data-src] {
			display: none !important;
		}
	</style>

</noscript>

<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="Наш логотип" />

<noscript>

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

</noscript>

Оригинальное изображение в теге <noscript> (как и сам тег) не обязательно, но желательно. Оно будет отображаться в том случае, если на стороне пользователя (в его браузере) отключена работа JavaScript.

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

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

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

<noscript>

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

</noscript>

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

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

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

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

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

function lazyload_img($buffer) {

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

ob_start("lazyload_img");

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

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

ФайлРазмерСсылка
10
комментариев
Форма комментирования этой статьи скрыта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.
    • 0
    784
      •  Администратор
    4 дек в 16:21

    Владимир Степанов, здравствуйте.

    Обновил статью. smiley

    • 0
    1
      •  Пользователь
    4 дек в 03:34

    Привет. Если в браузере отключен java script, то на месте картинок остаются пустые места.

    • 0
    784
      •  Администратор
    16 авг в 19:34

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

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

      • 0
      5
        •  Пользователь
      7 янв в 15:55

      Артём Мáлков,

      А будет инструкция как сделать для Dle тоже lazy Load?

      • 0
      784
        •  Администратор
      7 янв в 23:31

      Шаген, для DLE делается все так же с совмещением этого хака - https://www.pandoge.com/haki/minifikaciya-szhatie-ishodnogo-koda-html-v-dle-na-php

    • 0
    1
      •  Пользователь
    16 авг в 18:08

    Артем, все делал по вашей инструкции. Спасибо! А как для 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 вашей инструкции?

    • 0
    784
      •  Администратор
    18 июн в 01:06

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

    • 0
    22
      •  Проверенный
    17 июн в 21:31

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

    • 0
    784
      •  Администратор
    1 июн в 20:44

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

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

    • 0
    1
      •  Пользователь
    1 июн в 00:27

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

Подняться наверх
«Pandoge» - помощник вебмастера