0
40
2019-01-24

Плагин для отложенной загрузки изображений (lazy load) и для Elementor - Lazy Loader

Поговорим о плагине для отложенной загрузки изображений (который отлично подойдет для сайтов созданных при помощи плагина Elementor) - Lazy Loader. Который теперь имеет возможность исключать родительский блок изображений.
Понравилась страница? Поставь свою оценку!
PLUGIN_STAR_RATINGS.SCORE_TEXTPLUGIN_STAR_RATINGS.VOTES_TEXT

Lazy Loader - лучший плагин для реализации Lazy Load изображениям в CMS WordPress

Плагин Lazy Loader в репозитарии WordPress

Загрузить плагин

https://wordpress.org/plugins/lazy-loading-responsive-images/

Страница плагина на GitHub

https://github.com/florianbrinkmann/lazy-loading-responsive-images

Плагин отложенной загрузки, который поддерживает изображения, iFrames, видео и аудио элементы и использует легкий скрипт lazysizes. С помощью ручной модификации разметки также можно лениво загружать фоновые изображения, сценарии и стили.

Ленивые загрузки (без необходимости каких-либо модификаций вручную):

  • Изображения, вставленные через img или picture в сообщениях, страницах, пользовательских типах сообщений, текстовых виджетах,…
  • Lazy Load для миниатюр.
  • Поддерживает фреймы. *
  • Видео элементы. *
  • Аудио элементы. *

Плагин имеет свои настройки в разделе «Настройки» -> « Медиа » -> « Параметры Lazy Loader » в которых Вы можете настроить:

  • Классы присвоенные изображениям которые не нужно загружать отложено.
  • Включить отложенную загрузку для iFrames.
  • Включите плагин lazysizes unveilhooks, который добавляет поддержку для большего количества элементов, например, видео и аудио элементов для Lazy Load. *
  • Включить отложенную загрузку для аудио элементов.
  • Включите плагин lazysizes aspectratio . Этот плагин рассчитывает необходимое пространство для изображений до их загрузки. Это позволяет избежать скачков содержимого при загрузке изображений и обеспечивает ленивую загрузку для изображений который находятся в сетке постов.
  • Показать загрузочный счетчик.

  • Расширение unveilhooks lazysizes поддерживает больше, чем видео и аудио элементы, но вам нужно вручную изменить разметку, чтобы использовать его для:

  • Фоновые изображения.
  • Сценарии.
  • Стили.

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

Автоматическая модификация разметки изображения не работает для изображений, добавленных с использованием wp_get_attachment_image(), поскольку не может быть обработана noscript.

Вы можете отключить отложенную загрузку для элементов с определенными классами CSS, определив их с помощью настроек плагина ( Настройки › Медиа › Параметры Lazy Loader ). Или используйте атрибут data-no-lazyload.

Новая функция исключения блока с изображениями для Lazy Load

Друзья мной горячо любимый плагин Lazy Loader получил очередное обновление (не без усилий Вашего покорного слуги 👨)

Теперь у Вас есть возможность исключать родительский блок изображений, то есть достаточно указать класс:

disable-lazyload

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

Пример исключения родительского блока для отложенной загрузки

<div class="disable-lazyload">

    <img src="/image_1.png">

    <img src="/image_2.png">

</div>

То есть нам достаточно присвоить класс disable-lazyload блоку содержащему изображения. Данная функция просто фантастически необходима при работе с страницами созданными в Elementor. Так как теперь мы можем указать класс для отмены Lazy Load в секцию главного экрана. Вследствие чего главный экран сайта (верхняя часть страницы которая появляется сразу при загрузке сайта) не будет "дергаться и прыгать" подгружая изображения (так как плагин обрабатывает все изображения на сайте).