В этой записи мы с вами научимся подключать ленивую загрузку изображений на сайт. Ленивая загрузка — это способ загрузки элементов который позволяет прогружать элементы страницы, по мере появления их в зоне видимости(на экране).
По стандарту все изображения подгружаются сразу, что сильно нагружает процесс и тем самым увеличивает время загрузки.
Для реализации нашей задачи, мы будем использовать готовое решение — плагин 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">.
