Отправка сообщения






Отложенная загрузка изображений Lazy Load

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

Для этих целей существует решение, которое так же называют Lazy Load (ленивая загрузка). Особенность данной реализации в том, что при загрузке элементов изображений на странице, загрузка изображений происходит только в видимой области. Таким образом, если мы начинаем прокручивать страницу в низ, то изображения, которые находятся ниже, будут уже загружены после. Такое решение экономит время на загрузку сайта, в свою очередь это дополнительные плюсы для пользователей и поисковых систем.

Как работает Lazy Load

Теперь о внедрении данного решения. Решение на самом деле очень простое. Тег изображения (img) на странице подгружается привычным образом, однако вместо атрибута src ссылка на изображение указывается в атрибуте data-original. Первично страница загружается без загрузки самой картинки, но тег в теле присутствует. Загрузку изображения инициализирует js-скрипт, который и определяет, находится ли изображение в видимой области или нет.

Пример использования Lazy Load

Для использования скрипта Lazy Load достаточно подключить в заголовке страницы JQuery, после этого сам файл lazyload.js.

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="js/lazyload.js">

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

<img class="lazy" data-original="img/example.jpg">

Как вы уже заметили ссылка на оригинал изображения указан в атрибуте data-original. Самого же атрибута src нет, его будет задавать скрипт Lazy Load после инициализации. И наконец, чтобы инициализировать работу скрипта, в конце страницы следует добавить код вида:

$("img.lazy").lazyload();

Всё довольно просто и удобно, так как не требует больших модернизаций на сайте для существующих проектов.

Кто интересовался вопросами оптимизации скорости загрузки сайта с большой вероятностью сталкивались с сервисом Google PageSpeed. Сервис оценивает скорость загрузки сайта и даёт некоторые рекомендации по оптимизации. Среди таких рекомендаций можно встретить пункт в справке Google, где рекомендуется использовать Lazy Load. Это хороший знак в том плане, что у поисковой системы однозначно не будет вопросов с распознаванием изображений и отложенной загрузкой.

Заглушка для элементов изображений

Кстати иногда требуется использовать заглушку для изображений. Делается это с точки зрения эстетики отрисовки страницы. Заглушка представляет из себя простую картинку, которая существенно имеет меньше размер файла и максимально оптимизирована по размеру. Ссылку на заглушку указывают непосредственно в атрибут src тега img. Получается при первичной загрузки элемента, загружается заглушка. А далее уже Lazy Load делает своё дело. Так же чтобы исключить лишний запрос при загрузке заглушки, её кодируют в формат base64, таким образом она загружается вместе с основной страницей.

Опубликован: 24.06.2020 г.
 
нравится (Пока оценок нет)
Загрузка...

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Каталог сайтов — 4lib.kz

Комментарии

  • Загрузка...

Наверх