lazyload.js — подгрузка изображений при скроллинге страницы
Сегодня хочу поговорить о такой простой в интеграции и полезной библиотеке как lazyload.js. Видимо, само название заставляет многих разработчиков лениться и не оснащать свои проекты таким удобством как постепенная загрузка контента при скроллинге. Также удобно при создании внушительных фотогалерей. Самый яркий пример использования такого метода подачи контента – это любая социальная сеть. Вообще соц. сети довольно серьезно подходят к вопросу оптимизации контента, я лишь покажу как просто сегодня можно сделать постподгрузку контента на страницу.
При использовании этого метода вы убиваете сразу двух зайцев.
- Заяц 1 : Загрузка контента происходит не сразу, а постепенно, а это уважительное отношение к трафику пользователя. Особенно если речь идет действительно о крупных проектах, в которых счет единиц подгружаемого контента идет на тысячи или десятки тысяч.
- Заяц 2. Можно забыть про дурацкую пагинацию внизу страницы. Изучение контента на странице сводится только лишь к прокручиванию колесика на мышки или стрелки на клавиатуре.
Интеграция
Если у вас еще не установлен jQuery качаем: https://code.jquery.com/jquery-3.2.1.min.js. Далее скачиваем плагин: https://plugins.jquery.com/lazyload/
Добавляем библиотеку jquery и файл с библиотекой lazyload
|
1 2 |
<script src="jquery.js"></script> <script src="jquery.lazyload.js"></script> |
Вставляем изображения. Обратите внимание, что вместо атрибута src используется data-original. Схема работы такая: сначала подгружаются пустые изображения, а по мере скроллинга теги <img> заполняются изображениями из атрибута data-original. Не забудьте указать класс lazy для каждого изображения.
|
1 2 |
<img class="lazy" data-original="img/example1.jpg" width="640" height="480"><br> <img class="lazy" data-original="img/example2.jpg" width="640" height="480"><br> |
Ну и разумеется связываем класс lazy с jQuery.
|
1 2 3 |
$(function() { $("img.lazy").lazyload(); }); |
Можно установить параметр threshold в значение 200 и тогда контент загрузится только после смещения вниз на 200 пикселей.
|
1 2 3 |
$("img.lazy").lazyload({ threshold : 200 }); |
Можно использовать события jQuery такие как click или mouseover для подгрузки контента.
|
1 2 3 |
$("img.lazy").lazyload({ event : "click" }); |
По умолчанию плагин ждет полной загрузки изображения и вызывает функцию show(). Можно использовать любой эффект, например fadeIn.
|
1 2 3 |
$("img.lazy").lazyload({ effect : "fadeIn" }); |
Описанный плагин – это первая версия. Есть еще вторая, но она мало чем отличается от первой. Если в ней появится что-то интересно, я обязательно расскажу о ней.
Кстати, для WordPress есть плагин https://ru.wordpress.org/plugins/lazy-load/, так что кому лень ковыряться в коде можете попробовать его, я сам не пробовал, но читал на форумах что он рабочий.
No Comments