Технология отложенной загрузки картинок - это методика, позволяющая откладывать загрузку изображений на веб-странице до тех пор, пока пользователь не просмотрит их. Эта технология становится все более популярной, поскольку она позволяет улучшить скорость загрузки сайта и снизить нагрузку на сервер
Чтобы понять, как работает lazy load, нужно знать, как загружаются изображения на веб-страницах. Когда пользователь открывает страницу, все изображения загружаются сразу, даже те, которые находятся внизу страницы и не видны пользователю. Это занимает время и медленнее загружает страницу. Lazy load решает эту проблему, загружая изображения только тогда, когда они нужны пользователю.
Реализация метода на своем сайте
Рассмотрим на примере популярной JS библиотеки для LazyLoad - Lozad.js - ссылка на репозиторий
Порядок подключения:
Подключить библиотеку в футере, где у вас подключаются скрипты
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>
Ниже вставляем код инициализации объекта библиотеки
<script>
lozad('.lozad', {
load: function(el) {
el.src = el.dataset.src;
el.onload = function() {
el.classList.add('fade')
} }}).observe()
</script>
Для анимации подгрузки картинок в css файл можно вставить следующие стили:
.fade {
animation-name: fade;
animation-duration: 3s;
}
@keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
Теперь что бы изображения начали подгружаться помощью этой библиотеки, нужно изменить в html верстке код вставки изображения
<img class="lozad" data-src="image.png">
т.е. добавляем класс lozad и вместо а src меняем на data-src
Теперь при прокрутки страницы изображения буду медленно появляться.