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

2 апреля 2016 Антон Кулешов 4549 0

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

Реклама

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

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

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

<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 – в этот параметр можно установить свою заглушку.
Реклама
Комментариев еще не оставлено
no_avatar
Читайте далее

Слайдер с красивыми эффектами - Coin Slider

14 декабря 2014 Антон Кулешов

Совсем недавно, работая над новым сайтом, мне потребовался слайдер с красивыми эффектами. Ранее я описывал два достойных решения, которые в большинстве случаев подходят. В этот раз я хочу уделить внимание jQuery плагину под названием Coin Slider.

Всплывающая подсказка с HTML кодом

25 июня 2015 Антон Кулешов

Всплывающая подсказка вещь не новая, но когда возникает необходимость реализовать у себя на странице, то часто возникает вопрос: как лучше сделать? Вариантов для реализации подсказки множество: будь-то крупные библиотеки, к примеру, jQuery или MooTools, либо готовые плагины, а кто-то просто воспользуется стандартными средствами HTML и CSS. Главное: сделать вплывающую подсказку интересной и привлекательной для пользователя.

Работа с API Яндекс Метрикой

8 января 2015 Антон Кулешов

Недавно один пользователь «ВКонтакте» задал мне вопрос: как получить Яндекс токен для работы с API Метрикой? Проблема, по своей сути, не вызывает сложностей, хотя на тот момент я не мог дать исчерпывающего ответа. На поиск решения у «неподготовленного» читателя может уйти весьма продолжительный промежуток времени. В этой статье я рассмотрю простой пример работы с API Яндекс Метрикой и подробно распишу все этапы.