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». Если остались вопросы – пишите об этом в комментариях под данной статьей.
