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

Привет, в этой статье Я рассказываю как сделать ленивую загрузку изображений на любом сайте и на любом движке, а так же показываю пример на базе 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” – эффект появления графического элемента.
Ссылка на официальный сайт плагина jquery lazy load

Подвожу итог

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

 

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

24 responses to “Ленивая загрузка изображений”

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

    1. Ой, ну спасибо!

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

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

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

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

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

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

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

  7. Наталья Avatar
    Наталья

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

  8. Елизавета Avatar
    Елизавета

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

  9. Александр Avatar
    Александр

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

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

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

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

  13. Светлана Avatar
    Светлана

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

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

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

  16. Константин Avatar
    Константин

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

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

    1. Спасибо, добавил в статью

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

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

  19. Огромное вам человеческое спасибо я неделю мучился и не знал как все это осуществить !
    Благодаря вашей статье удалось решить проблему за 2 минуты !
    Дай Бог вам всего самого наилучшего за вашу статью и успехов во всех начинаниях !

Leave a Reply

Your email address will not be published. Required fields are marked *