Важной частью работы любого сайта является скорость его загрузки у пользователя в браузере. Тут правило одно - чем быстрее, тем лучше. Оптимизировать проект не всегда возможно, и тут к нам на выручку приходят некоторые хитрости. Сегодня мы поговорим о «ленивой загрузке» картинок на сайте, и использовать будем 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 – в этот параметр можно установить свою заглушку.