lazyload.js — подгрузка изображений при скроллинге страницы

Сегодня хочу поговорить о такой простой в интеграции и полезной библиотеке как lazyload.js. Видимо само название заставляет многих разработчиком лениться и не оснащать проекты своих клиентов таким удобством как постепенная подгрузка контента при скролинге. Также удобно при создании внушительных фотогалерей. Самый яркий пример использования такого метода подачи контента — это любая социальная сеть. Вообще соц. сети довольно серьезно подходят к вопросу оптимизации контента, я лишь покажу как просто сегодня можно сделать постподгрузку контента на страницу.

При использовании этого метода вы убиваете сразу двух зайцев.

    Заяц 1 : Подгрузка контента происходит не сразу, а постепенно, а это уважительное отношение к трафику пользователя. Осебенно если речь идет действительно о крупных проектах, в которых счет единиц подгружаемого контента идет на тысячи, десятки тысяч или миллионы.
    Заяц 2. Можно забыть про дурацкую пагинацию внизу страницы. Изучение контента на странице сводится только лишь к прокручиванию колесика на мышки или стрелки на клавиатуре.



Интеграция

Если у вас еще не установлен jQuery качаем: https://code.jquery.com/jquery-3.2.1.min.js
Для начала скачиваем плагин: https://plugins.jquery.com/lazyload/

Добавляем библиотеку jquery и файл с библиотекой lazyload

Вставляем изображения. Обратите внимание, что вместо тега атрибута src используется data-original. Схема работы такая: сначала подгружаются пустые изображения, а по мере скроллинга теги заполняются изображениями из атрибута data-original. Не забудьте указать класс lazy для каждого изображения.

Ну и разумеется связываем класс lazy с jquery.

Можно установить параметр threshold в значение 200 и тогда контент подгрузится только после смещения вниз на 200 пикселей.

Можно использовать события jQuery такие как click или mouseover для подгрузки контента.

По умолчанию плагин ждет полной загрузки изображения и вызывает функцию show(). Можно использовать любой эффект, например fadeIn.

Описанный плагин — это первая версия. Есть еще вторая, но она мало чем отличается от первой, но она иногда допиливается автором. Если в ней появится что-то интересно, я обязательно расскажу о ней.

Кстати, для wordpress есть плагин https://ru.wordpress.org/plugins/lazy-load/, так что кому лень ковыряться в коде можете попробовать его, я сам не пробовал заненадобностью, но читал на форумах что он рабочий.

7 комментариев

  • Спасибо за обзор — все просто и понятно. Подключил на сайте клиента.

  • Путлер гнида

    Вставил в код скрипты, но не понял, куда вставить $… («связываем класс…»). В css? Или куда? Попробовал запихнуть в body — не работает, в сам скрипт — тоже не работает. Так и не разобрался.
    Автор так написал статью, как будто всем читателям очевидно, что значит «связываем класс». Ну, так этим читателям может и нахрен не нужна эта статья, а нужна тем, кто не знает этих тонкостей???

    • В css вставить js? Ты серьезно. В head вставь или в конец страницы перед закрывающим body. Если не заработает, значит конфликт с другими скриптами, не той версии библиотека jQuery или руки не из того места :).

  • Гарисон

    Подсказка о data-original очень кстати.
    Работает только с ней.
    Благодарен. Все класс !

  • Благодарю, очень хорошо расписали. Но у меня не заработало, вместо картинки выдавало пустое место — data-original не желало работать. Возможно я не так понял.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *