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

Lazy Loader – лучший плагин для реализации Lazy Load изображениям в CMS 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 в секцию главного экрана. Вследствие чего главный экран сайта (верхняя часть страницы которая появляется сразу при загрузке сайта) не будет “дергаться и прыгать” подгружая изображения (так как плагин обрабатывает все изображения на сайте).

Источник записи: