Привет, в этой статье Я рассказываю как сделать ленивую загрузку изображений на любом сайте и на любом движке, а так же показываю пример на базе 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 секунд. Только вдумайтесь: в три раза быстрее!
А ты используешь ленивую загрузку?
