Ленивая загрузки изображений на web-страницах


Всё больше и больше людей заходят на сайты с мобильных устройств. И поэтому важно, то как быстро загружается сайт. Не стоит забывать про поисковики, скорость загрузки сайта влияет на ранжирование.
Одним из способов уменьшить время загрузки сайтов является "Ленивая загрузка".
Проще говоря, это использование фотографии-заглушки, а когда вы проскролите страницу до фотографий - они прогрузятся.
Это снижает количество HTTP-запросов к серверу, что способствует более быстрой загрузке контента сайта.
Реализация крайне проста.
Качаете файлы библиотеки. Добавляем код в тег ``

$(document).ready(function(){
   $('img.lazy').lazyload()
})

Ждём когда прогрузится страница. И "вешаем" обработчик на картинки с классом lazy.

//Фотография "заглушка"
src="/images/logo.png"
//Фотография, которая потом прогрузится.
data-src="/products/image10.png"

На первой картинке видно, сколько фотографий грузится без отложенной загрузки

Imgur

Второй скрин показывает сколько фотографий, а следственно HTTP-запросов к медиа-файлам с отложенной загрузкой.

Imgur

Пример того, как браузер запрашивает картинки по мере проскроливания страницы:

Отложенную загрузку я реализовал на сайтах: turbinaspec.ru и z-s-t.ru

Материал подготовлен автором @zheev


Comments 8


Я правильно понимаю что ленивую загрузку следует использовать только на достаточно длинных страничках?

28.12.2017 08:09
0

Если страница длиннее одного экрана-да. Даже если меньше-лишним не будет.
С такой подгрузкой страница всегда грузится быстрее и как-то "плавнее" что-ли.
Надеюсь когда-нибудь браузеры и сами будут это делать по-умолчанию.

28.12.2017 08:58
0
28.12.2017 09:44
0
28.12.2017 09:45
0

А есть ли в апи плавная подгрузка из прозрачного? или такого функционала нет?

28.12.2017 13:17
0

к сожалению, не могу сказать. Не задавался таким вопросом и не узнавал

28.12.2017 19:30
0

Можно по-умолчанию сделать картинки прозрачными, а на событие изменения элемента(картинки) делать её плавно видимой.

28.12.2017 19:37
0