Уважаемые пользователи Голос!
Сайт доступен в режиме «чтение» до сентября 2020 года. Операции с токенами Golos, Cyber можно проводить, используя альтернативные клиенты или через эксплорер Cyberway. Подробности здесь: https://golos.io/@goloscore/operacii-s-tokenami-golos-cyber-1594822432061
С уважением, команда “Голос”
GOLOS
RU
EN
UA
vp-webdev
7 лет назад

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


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

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

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

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

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

Imgur

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

Imgur

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

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

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

0
39.073 GOLOS
На Golos с August 2017
Комментарии (8)
Сортировать по:
Сначала старые