LazyLoad LITE - Отложенная загрузка изображений

Модуль автоматически размечает изображения на странице в тегах img под отложенную загрузку атрибутом loading="lazy", и отложенная загрузка происходит без использования JS.Это облегченная версия модуля LazyLoad, которая работает только с изображениями в тегах img.Преимуществом этой версии является то, что здесь не используется Javascript для реализации ленивой загрузки, а используется атрибут loading="lazy" (введён в 2019 году), благодаря которому браузер самостоятельно производит ленивую загрузку.Такой механизм позволяет не терять баллы Google Page Speed за счёт дополнительного времени на загрузку и исполнение Javascript и является самым эффективным с точки зрения использования ресурсов браузера.Относительно Google PageSpeed модуль решает задачу "Отложите загрузку скрытых изображений":Дополнительные возможности:Есть возможность отключить отложенную загрузку в зависимости от наличия строки в URL изображения (актуально для счётчиков и пикселей ретаргенинга)Есть возможность отключить отложенную загрузку для изображений с определенными классамиЕсть возможность отключить модуль на определенных доменах, разделах или страницахПреимущества модуля:Используется самый эффективный и быстрый метод ленивой загрузки изображенийАвтоматически размечает все подходящие изображения на странице под отложенную загрузку (не требуется вручную указывать специальные классы и атрибуты)Не использует JavascriptУчитывает уже существующие атрибуты loading у изображенийРаботает в композитном режимеРаботает в AJAX режимеРаботает с CDNНе конфликтует с другими решениями lazyloadНедостатки:Обрабатывает только изображения и только в тегах img (другие теги не поддерживают атрибут loading="lazy")Метод работает только в современных браузерах (в устаревших браузерах изображения будут загружаться как обычно)Если вам требуется расширенный функционал Lazyload, то вы можете попробовать модуль "LazyLoad PRO - Отложенная загрузка изображений, видео и iframe в 1 клик" В вашем браузере отключен JavaScript BX.ready(function() { BX.message({'ENABLE_JAVASCRIPT':'В вашем браузере отключен JavaScript','JS_PLAYLISTERROR':'Произошла ошибка при загрузке списка воспроизведения','JS_CLICKTOPLAY':'Нажмите для просмотра','JS_LINK':'Скачать...','PLAYER_LOADING':'Загрузка плеера','PLAYER_FLASH_REQUIRED':'Плеер не может проиграть видео. Скорее всего у вас не установлен или отключен Adobe Flash Player','PLAYER_FLASH_CHECK':'Возможно, у вас не установлен или отключен Adobe Flash Player'}); var init_player_bx_videojs_player_ab062fdc6b59ad7f305aa6CodW2j = function() { var player = new BX.Fileman.Player('bx_videojs_player_ab062fdc6b59ad7f305aa6CodW2j', {'autoplay':false,'preload':false,'controls':true,'height':'360','width':'640','techOrder':['html5','flash'],'fluid':false,'notSupportedMessage':'Не найдено подходящего способа для воспроизведения','errorMessages':{'4':''},'sources':[{'src':'https://dkrotov.com/delight.lazyloadlite/lazyload.webm','type':'video/webm'}],'skin':'vjs-default-skin'}); if(!player.lazyload) { player.init(); } }; if(typeof videojs == 'undefined') { window.videojs_player_timout = true; BX.loadCSS(['/bitrix/js/fileman/player/videojs/video-js.css?168079648346935']); BX.loadScript(['/bitrix/js/fileman/player/fileman_player.js?161142789114184','/bitrix/js/fileman/player/videojs/video.js?1695493644879784'], function() { setTimeout(function() { init_player_bx_videojs_player_ab062fdc6b59ad7f305aa6CodW2j(); }, 100); }); } else { if(window.videojs_player_timout === true) { setTimeout(function() { init_player_bx_videojs_player_ab062fdc6b59ad7f305aa6CodW2j(); }, 100); } else { init_player_bx_videojs_player_ab062fdc6b59ad7f305aa6CodW2j(); } } }); Поблагодарить разработчика:https://money.yandex.ru/to/41001510540341-------------------------------------------------------------------Ещё полезные модули для ускорения сайта:Если вам требуется решить проблему оптимизации изображений и конвертирования их в современный формат, вам может быть интересен другой мой модуль:Webp - конвертер изображений в современный формат «на лету»Для решения проблемы «Устраните ресурсы, блокирующие отображение» можно использовать модуль: Предзагрузчик ресурсовДля решения проблем с уменьшением размера кода HTML, JS, CSS вы можете использовать модуль Минификация HTML/JS/CSS

LazyLoad LITE - Отложенная загрузка изображений

Установить

от Дмитрий Кротов

• Описание
• Отзывы ()
• Обсуждения (1)
• Что нового
• Установка
• Поддержка

Описание

Технические данные

Опубликовано:

03.11.2020

Обновлено:

25.05.2022

Версия:

1.0.2

Установлено:

Более 1000 раз

Подходящие редакции:

«Первый сайт», «Старт», «Стандарт», «Малый бизнес», «Бизнес», «Интернет-магазин + CRM»

Адаптивность:

Да

Поддержка Композита:

Да

Совместимо с Сайты24

Нет

Совместимо с PHP 8.1

Да

Пользовательское соглашение

Описание

Модуль автоматически размечает изображения на странице в тегах img под отложенную загрузку атрибутом loading="lazy", и отложенная загрузка происходит без использования JS.

Это облегченная версия модуля LazyLoad, которая работает только с изображениями в тегах img.
Преимуществом этой версии является то, что здесь не используется Javascript для реализации ленивой загрузки, а используется атрибут loading="lazy" (введён в 2019 году), благодаря которому браузер самостоятельно производит ленивую загрузку.
Такой механизм позволяет не терять баллы Google Page Speed за счёт дополнительного времени на загрузку и исполнение Javascript и является самым эффективным с точки зрения использования ресурсов браузера.

Относительно Google PageSpeed модуль решает задачу "Отложите загрузку скрытых изображений":

Дополнительные возможности:

• Есть возможность отключить отложенную загрузку в зависимости от наличия строки в URL изображения (актуально для счётчиков и пикселей ретаргенинга)
  
• Есть возможность отключить отложенную загрузку для изображений с определенными классами
  
• Есть возможность отключить модуль на определенных доменах, разделах или страницах
  

Преимущества модуля:

• Используется самый эффективный и быстрый метод ленивой загрузки изображений
  
• Автоматически размечает все подходящие изображения на странице под отложенную загрузку (не требуется вручную указывать специальные классы и атрибуты)
  
• Не использует Javascript
  
• Учитывает уже существующие атрибуты loading у изображений
  
• Работает в композитном режиме
  
• Работает в AJAX режиме
  
• Работает с CDN
  
• Не конфликтует с другими решениями lazyload
  

Недостатки:

• Обрабатывает только изображения и только в тегах img (другие теги не поддерживают атрибут loading="lazy")
  
• Метод работает только в современных браузерах (в устаревших браузерах изображения будут загружаться как обычно)
  

Если вам требуется расширенный функционал Lazyload, то вы можете попробовать модуль "LazyLoad PRO - Отложенная загрузка изображений, видео и iframe в 1 клик"


Поблагодарить разработчика:
https://money.yandex.ru/to/41001510540341


-------------------------------------------------------------------

Ещё полезные модули для ускорения сайта:

Если вам требуется решить проблему оптимизации изображений и конвертирования их в современный формат, вам может быть интересен другой мой модуль:
Webp - конвертер изображений в современный формат «на лету»



Для решения проблемы «Устраните ресурсы, блокирующие отображение» можно использовать модуль: Предзагрузчик ресурсов

Для решения проблем с уменьшением размера кода HTML, JS, CSS вы можете использовать модуль Минификация HTML/JS/CSS

Отзывы ()

0 0

Пока что нет отзывов.

Обсуждения (1)

Обсуждения (1)

Добавить комментарий

Пользователь 4027622 6 мая 2021 17:12

Для тега <img> добавляет loading="lazy" и, вроде, загрузка становится ленивой.
А что, если у меня вывод картинки идет типа:
<div class="" data-slide-id="" st yle="background-image: url(); width: 328px;" role="group" aria-label="1 / 20">
                                <img src="/local/3x2.svg" loading="lazy" alt="" title="">
                            </div>
Как тут сделать ленивой подгрузку у  style="background-image:"

Дмитрий Кротов (разработчик) 6 мая 2021 17:17

Masan Yury, Добрый день, этот модуль работает только с изображениями в тегах img. Атрибут loading="lazy" не работает на фоновых изображениях. С фоновыми изображениями (с использованием JS) работает PRO-версия модуля: https://marketplace.1c-bitrix.ru/solutions/delight.lazyload/

Что нового

1.0.2 (01.07.2021)	Изменение издателя модуля
1.0.1 (03.03.2021)	Исправление парсинга изображений

Установка

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

Поддержка

Техническая поддержка платная.
При обращении за технической поддержкой обязательно указывайте ссылку на сайт, доступы в админку и FTP!
По вопросам техподдержки, обнаружения ошибок и расширения функциональности модуля обращайтесь на почту dronazzz@mail.ru

Другие решения разработчика

Асинхронизатор: асинхронная загрузка компонентов 15 000 руб.

Расширенные накопительные скидки в правилах работы с корзиной 7 000 руб.

PHP-условие в правилах работы с корзиной для реализации собственных условий скидок и наценок 3 000 руб.

Webp - Конвертер изображений в современный формат «на лету» 5 000 руб. 2

LazyLoad PRO - Отложенная загрузка изображений, видео и iframe в 1 клик 3 500 руб.

Предзагрузчик ресурсов 2 000 руб.

Минификация HTML/JS/CSS 3 000 руб.