ленивая загрузка плагин lazy load xt

Настройка плагина Lazy load XT. Добавление ленивой загрузки изображений на сайт.

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

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

Для реализации нашей задачи, мы будем использовать готовое решение – плагин Lazy load XT

Для работы плагина необходимо подключить jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

Сам скрипт Lazy load XT необходимо добавлять вручную в заранее созданный файл. Поэтому я создал JavaScript файл, который назвал lazy.js и подключил его к своему проекту.

Во внутрь файла я добавил следующий код, который взял со страницы на GitHub – https://github.com/ressio/lazy-load-xt/

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

При нажатии на ссылку появляется код, который нужно добавить в файл lazy.js.

Далее мы добавляем на свой проект изображения, у которых атрибут src необходимо заменить на атрибут data-src.

<img data-src="a.png" width="200" height="200">
<img data-src="dlya-google.jpg" width="200" height="200">
<img data-src="fotorama_io.jpg" width="200" height="200">
<img data-src="kak-ustanovit-open-server-1024x576.jpg" width="200" height="200">

Всё. Если вы все сделали правильно, плагин должен работать.

Если у вас что-то не получилось, вы можете написаться нам в группе Вконтакте, и мы вам обязательно поможем – https://vk.com/progtime

Теперь давайте посмотрим на работу нашего плагина.

На это скриншоте видно что у нас прогрузились два изображения, которые попали в зону видимости. И теперь если мы будем опускаться вниз по странице, то у нас начнут загружать и другие изображения.

Не только изображения!

Данный плагин поддерживает “ленивую загрузку” не только для изображений. Его можно использовать для всех тегов, которые именю атрибут src:
<audio><embed><frame><iframe><img><video><input type="image">.

На этом всё!
Если у вас есть вопросы, пишите их в нашей группе - https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи - https://vk.com/prog_time
В ней мы делимся своим опытом с другими начинающими программистами, поэтому обязательно ответим на ваш вопрос.
Так же прокачивайте свои навыки на нашем канале - https://www.youtube.com/c/ProgTime

Оставить комментарий

avatar
  Подписаться  
Уведомление о