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

2 апреля 2016 Антон Кулешов 4573 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
Читайте далее

Авто эффект печатания текста

31 марта 2016 Антон Кулешов

Несколько статей назад, я рассказывал: как написать на JavaScript простую имитацию набора текста на печатной машинке. Воспользовавшись данным эффектом можно, к примеру, выделить важные заголовки на странице. Но при написании скрипта не были учтены маленькие нюансы. В общем, сегодня мы рассмотрим jQuery плагин под название typed. Он будет хорошим инструментом в арсенале веб-разработчика, когда потребуется добавить на сайт эффект набора текста.

Социальные кнопки поделиться – пишем сами

3 мая 2015 Антон Кулешов

С ростом популярности социальных сетей и сервисов кнопки поделиться прочно укоренились на страницах большинства сайтов. Имея свою колонку на «Фейсбуке» или «Вконтакте», человек волей-неволей собирает на неё интересующий его материал, так почему бы не предложить ему поделиться статьёй и с нашего сайта. Для этих целей сегодня мы и попытаемся реализовать функционал кнопок поделиться для основных соцсетей.

Как сделать вкладки-табы для сайта на jQuery

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

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