Ленивая загрузка изображений

Привет, в этой статье Я рассказываю как сделать ленивую загрузку изображений на любом сайте и на любом движке, а так же показываю пример на базе WordPress, аналогичный DLE, Drupal, Prestashop и другим популярным CMS.

Немного теории

Ты что ещё не в курсе? Ленивая или отложенная загрузка (от английского lazy load) это технология позволяющая загружать только те изображения на странице, которые в данный момент нужны пользователю. Результат внедрения — ускорение загрузки страницы, довольный посетитель и увеличение конверсии.

Все заметили как вконтакте быстро грузится!?

Пример из жизни

Представь что у тебя на странице около 200 изображений (это может быть страница категорий в интернет магазине или раздел фотогалереи или даже запись в блоге). Пусть каждое изображение размером 250 на 250 пикселей и весит 50 Кб. Итого получаем почти 10 мб изображений (200 шт * 50 кб = 10’000 кб) и 200 запросов к серверу.

Зачем нагружать пользователя таким количеством информации сразу? Давай покажем ему только первые 8 изображений, а остальные по мере того как они ему понадобятся. Загрузка страницы в этом случае пройдёт в разы быстрее. Кроме того, большинство твоих пользователей вообще не будут скролить страницу до конца. Им будет достаточно этих 8 уже загружённых изображений!

Отличный пример реализации ленивой загрузки: смотреть пример!

Wildberries это сайт с ежедневной милионной посещаемостью Представляешь себе нагрузку на сервер?

Внедрение (установка) ленивой загрузки

Установить ленивую загрузку на своём сайте может каждый и ты тоже, достаточно поэтапно выполнить следующие шаги:

1. Скачай lazyload.rar

2. Загрузи файлы из архива на свой сервер, например в корень твоего сайта, чтобы файлы были доступны ссылке вроде tvoisite.ru/js/jquery.js

3. Подключи эти файлы в шаблон (для WordPress это файл header.php, а для DLE это main.tpl), а сразу после них вставь код. У тебя должно получиться нечто похожее на это:

<script src='/js/jquery-1.8.2.min.js' type='text/javascript'></script>
<script src='/js/jquery.lazyload.min.js' type='text/javascript'></script>

<script type='text/javascript'>
	$(function() {
		$("img").lazyload({
			failurelimit : 10,
			threshold : 150,
			placeholder : "/img/dot.gif",
			effect : "fadeIn"
		});
	});
</script>

Эти строчки нужно включить до элемента </header>

4. Чтобы картинка сразу не загружалась, надо для всех изображений которые мы хотим лениво загружать, заменить
<img src=
на
<img data-original=

5. Готово! Но ты должен настроить этот скрип под себя, вот параметры которые ты можешь настроить:

  • failurelimit : 10 — скрипт останавливает поиск после того, как обнаружит 10 изображений на странице. Если у твоей страницы достаточно сложная разметка, то укажи здесь число побольше.
  • threshold : 150 — порог открытия изображения. Если установить значение 0, то изображение начнёт загружаться только в тот момент когда появится на странице. В нашем случае изображение начнёт загружать заранее, т.е. за 150 пикселей до появления в зоне видимости.
  • placeholder : «/img/dot.gif» — путь к фоновой картинке, которая будет отображаться пока не загрузится само изображение. Здесь можно установить какую-нибудь анимацию загрузки.
  • effect : «fadeIn» — эффект появления графического элемента.

Подвожу итог

Я использую технологию отложенной загрузки в двух своих интернет магазинах. Это позволяет мне экономить ресурсы сервера, а так же не заставлять пользователя томится в ожидании полной загрузки страницы. В своё время с помощью этой технологии Я уменьшил скорость загрузки своего интернет магазина с 6 до 2 секунд. Только вдумайтесь: в три раза быстрее!

 

А ты используешь ленивую загрузку?

Есть что добавить? Остались вопросы? Написать!
  1. Дельный совет, спасибо. Не знаю как мой блог загружается но такие советы нужно иметь на подхвате. Ставлю твой сайт в закладочку, спасибо.

    Ответить
  2. Здравствуйте. Не совсем понятно, всё же куда добавлять строчки кода? В файле header.php вряд ли получится найти открывающие и закрывающие теги <header> :)

    Заранее спасибо!

    Ответить
    • OnArs

      Код конечно у всех индивидуальный. Так что спорить не стану. В большинстве случаев тег есть.

      Ответить
  3. Вадим

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

    Ответить
  4. sania046

    Спасибо за ленивый код изображения, давно его искал, хочу применить его на своем сайте на изображения!

    Ответить
  5. Nica

    Ой, спасибо!) Хоть и учусь на программиста, но таких интересных штук ещё не встречала. Обязательно использую :)

    Ответить
  6. Михаил

    Теперь знаю от чего зависит эта «лень» изображений. Действительно, почти каждый день такое наблюдаю.

    Ответить
  7. Наталья

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

    Ответить
  8. Елизавета

    Даже и не знала, что это этот метод загрузки так называется. Но очень удобно. А тот же Вконтакте лениво подгружает не только изображения, но и посты, это какой-то другой код?

    Ответить
  9. Александр

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

    Ответить
  10. Иван

    Спасибо за Ваш труд! Статья действительно избавила меня от лишних часов поиска решения моей проблемы.

    Ответить
  11. Максим

    У меня часто «лениво» загружаются изображения. Действительно, в контакте все грузится очень быстро.

    Ответить
  12. Sunrise

    Вот только недавно об этом подумал и тут нашёл нужную информацию! Очень полезная информация для меня, на собственном примере убедился. Спасибо за коды для ленивых изображений.

    Ответить
  13. Светлана

    Не слышала о таком. Спасибо автору, просветил! Для меня только это всё как то мудрёно. Но, думаю, в процессе разберусь. Попробую!

    Ответить
  14. Влад

    На самом деле, то что вы называете «ленивой» загрузкой — AJAX. И не всегда в таком виде его полезно использовать. Взять тот же Контакт. Попробуйте в футере успеть нажать на какую-нибудь ссылку — подгрузка новых записей вам это не даст. Я бы добавил кнопки «пагинации» на аяксе. Где вы видели инт-магазины с 200 товарами на 1 странице? Уже больше 3 лет в этой сфере — ни разу не видел. 200 картинок — 200 запросов? Убить программиста за такое. 1 запросом можно и тысячи картинок вытащить — не проблема. А вот аяксом как раз и создаются новые запросы при каждой такой «ленивой» подгузке картинок. Пользуйтесь, но с умом =)

    Ответить
  15. Влад

    Кстати, судя по тому, что этот код просто вставляют в код шаблона толку для разгрузки сервера — нет! Страница также генерируется сервером (целиком, со всеми картинками), выводится в браузер, потом только этот скрипт его подхватывает и лениво подгружает.

    Ответить
  16. Константин

    В своей статье забыл указать, чтобы картинка сразу не загружалась, надо для всех изображений которые мы хотим лениво загружать, заменить
    <img src=
    на
    <img data-original=

    Вот тогда будет правильно работать.

    Ответить
  17. Игорь

    Влад, ты не понял сути.
    Во-первых, на сервере генерируется исключительно HTML-код страницы. Потом браузер хватает этот код и во всех местах, где надо, подгружает дополнительными запросами дополнительные данные с сервера (другая страница в айфрейме, изображения, скрипты, стили и так далее). Все они находятся в абсолютно разных файлах. Так вот, суть ленивой подгрузки в том, что не все изображения грузятся в одно и то же время с загрузкой страницы, тем самым снижая количество запросов к серверу.
    Кстати, говоря о том, что ты одним запросом можешь получить все 200 изображений, то руки тебе оторвать надо и язык, если себя программистом именуешь.

    Ответить
  18. Mikegala

    «Ленивая загрузка» — динамическая подгрузка товаров с других страниц. Пользователь всегда остается на одной странице и по мере пролистывания списка товаров ему подгружаются остальные.

    Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *