Показать Меню
falbar Ленивая загрузка картинок jQuery

Ленивая загрузка картинок, используя jQuery

Ленивая загрузка картинок jQuery

Важной частью работы любого сайта является скорость его загрузки у пользователя в браузере. Тут правило одно - чем быстрее, тем лучше. Оптимизировать проект не всегда возможно, и тут к нам на выручку приходят некоторые хитрости. Сегодня мы поговорим о «ленивой загрузке» картинок на сайте, и использовать будем jQuery плагин Lazy Load.

Самый наглядный и лучший пример работы Lazy Load - это лента любой социальной сети. Сам принцип прост, подгружать изображения постепенно, по мере прокрутки страницы пользователем. Если вдаться немного в теорию, то при открытии HTML страницы её загрузка происходит в два этапа. Во-первых, загружается структура документа, а во-вторых, происходит дозагрузка встраиваемых файлов (в нашем случае - картинок). Lazy Load вклеивает вместо наших изображений пустышки с минимальным весом, путем генерации их через data:image;base64, а при прокрутке уже догружает основной медиа контент. Таким образам сокращается время загрузки страницы, что очень хорошо!

Готовя материал к этой статье, я наткнулся на массу примеров, где данный плагин любо подключен неправильно, либо не работает, что очень странно.

Итак, давайте начнем с подключения скриптов:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.lazyload.min.js" type="text/javascript"></script>

Добавим HTML:

<p>
	<img class="lazyImg" data-original="img/img1.jpg" width="700" height="600" alt="lazyload image1" />
</p>
	<!-- ... -->
<p>
	<img class="lazyImg" data-original="img/img10.jpg" width="700" height="600" alt="lazyload image10" />
</p>

При добавлении разметки важно указать атрибуты width и height, иначе работать скрипт не будет или указать ширину и высоту в стилях картинки.

Теперь вызываем новый метод после загрузки HTML документа:

$(function(){

	$("img.lazyImg").lazyload({
		effect: "fadeIn"
	});
});

У плагина есть несколько полезных настроек:

  • event – событие, по которому начинать загрузку картинки (click или scroll);
  • effect – анимация отображения (show или fadeIn);
  • container – указывается контейнер, в котором нужно искать изображения;
  • placeholder – в этот параметр можно установить свою заглушку.

Подписаться на обновления

Комментариев еще не оставлено