Отложенная загрузка изображений

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

В этой заметке описана отложенная загрузка изображений. Фреймы, скрипты, медиа и т.д. рассмотрены в теме: "Отложенная загрузка контента".

Для отслеживания процесса загрузки нажмите на меню справа (с монитора)

Установка:

jquery.lazy доступен для подключения через cdnjs и jsDelivr CDN:

Использование:

У картинки вместо атрибута src используем атрибут data-src и добавляем нужный класс:

Инициализируем скрипт после загрузки страницы к нужному классу:

Пример:

Обратите внимание:

Атрибут src у изображения является не обязательным, но если его нет и у картинки нет размеров, то ее высота будет равна нулю. Соответственно, если 100 таких фотографий будут следовать друг за другом, то все они одновременно окажутся в видимой области и начнут загружаться.

Чтобы этого избежать, нужно задать размеры фотографий или использовать миниатюру, как в примере.

Функции обратного вызова:

Плагин Lazy имеет четыре функции обратного вызова, которые срабатывают в разных точках загрузки элемента.

  • beforeLoad - вызывается прежде чем картинка будет загружена
  • afterLoad - вызывается после успешной загрузки изображения
  • onError - вызывается когда картинка не может быть загружена
  • onFinishedAll - вызывается когда все фотографии загружены или была возвращена ошибка

Пример:

Настройки:

Имя Тип По умолчанию Описание
name string 'lazy' Внутреннее имя, используемое для привязок.
chainable boolean true По умолчанию Lazy является цепочкой и возвращает все элементы. Если установлено значение false, Lazy вернет созданный экземпляр плагина для дальнейшего использования.
autoDestroy boolean true Автоматическое уничтожение экземпляра, когда никакие другие элементы не доступны для обработки..
bind string 'load' Если установлено значение load, Lazy начнет работать сразу после загрузки страницы. Если нужно использовать собственные события - event.
threshold integer 500 Количество пикселей под видимым окном, при котором начнется загрузка изображений.
visibleOnly boolean false Должны ли загружаться только видимые элементы.
appendScroll integer window Элемент для прослушивания событий прокрутки. Может быть полезен, когда изображения хранятся в контейнере.
scrollDirection string 'both' Определяет направление прокрутки. Вертикальная vertical, горизонтальная horizontal или обе both.
imageBase string null Если этот параметр определен, он будет использоваться в качестве базового пути для всех изображений.
defaultImage string blank image Base64 код картинки, который устанавливается в качестве источника изображения src и показывается до того как загрузится основная фотография.
placeholder string null Base64 код картинки, который устанавливает фон для каждого элемента в качестве плейсхолдера загрузки.
delay integer -1 Если нужно загрузить все элементы сразу после загрузки страницы, можно указать время задержки в миллисекундах.
combined boolean false С помощью этого параметра Lazy будет объединять управление событиями и задержанной загрузкой элементов.
Эффекты
effect string 'show' Эффект, который используется для отображения загруженных изображений show или fadeIn.
effectTime integer 0 Время эффекта в миллисекундах.
Тротлинг
enableThrottle boolean true Включает тротлинг.
throttle integer 250 Время в миллисекундах для ограничения вызовов загрузки.

Дополнения:

Дополнения для плагина jquery.lazy рассмотрены в теме: "Отложенная загрузка контента".


Плагин jquery.lazy на сайте авторов
Плагин jquery.lazy на github
Автор фотографии TimHill

Смотрите также:

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

Ваш комментарий отправлен!