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

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

Это вторая часть его описания, в которой рассмотрены его дополнения. Первая часть: Отложенная загрузка изображений

Оглавление:

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

Установка:

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

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

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

Функции обратного вызова и настройки плагина можно посмотреть в теме: Отложенная загрузка изображений

Отложенная загрузка AJAX:

Имена: ajax, get, post, put

Параметры: data-src, data-method, data-type

По умолчанию для: -

AJAX может получать данные с заданного url и вставлять ответ во внутренний html-код элемента. Это полезно, когда нужно загрузить большее количество контента. По умолчанию в качестве имени загрузчика используется ajax. Но есть некоторые сокращенные названия для конкретных типов запросов GET, POST и PUT.

В запросах POST и PUT обратный вызов ajaxCreateData будет выполняться перед каждым вызовом AJAX. При использовании функция обратного вызова должна возвращать значение параметра data jQuery AJAX функции.

Пример:

Отложенная загрузка аудио / видео:

Имена: av, audio, video

Параметры: data-src, data-poster

По умолчанию для: <audio>, <video>

Загружает элементы <audio> и <video> и прикрепляет источники и дорожки по порядку.

Существует два способа подготовки аудио и/или видео тегов. Первый способ заключается в добавлении всех источников по атрибуту data-src через запятую по формату файла.

Другой способ - добавить источники и треки, в качестве дочерних элементов.

Пример:

Отложенная загрузка фреймов:

Имена: frame, iframe

Параметры: data-src, data-error-detect

По умолчанию для: <iframe>

Загружает содержимое <iframe>. Значение по умолчанию возвращает успешную загрузку, даже если url-адрес iframe недоступен (например, 404 или неправильный url-адрес). Если известно, что запрашиваемый путь доступен и нет необходимости в проверке ошибок, можно использовать этот способ.

Второй способ поддерживает проверку ошибок. Он загрузит содержимое с помощью AJAX и проверит ответ. Используется только на том же домене.

Чтобы включить эту функцию, нужно установить атрибут data-error-detect значение true или 1

Пример:

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

Имена: pic, picture

Параметры: data-src, data-srcset, data-media, data-sizes

По умолчанию для: <picture>

Загружает элементы <picture>, а не <img>, которые описаны в теме "Отложенная загрузка изображений" и прикрепляет источники. Есть два способа, которыми можно подготовить изображение.

Первый способ - создать все дочерние элементы одной строкой:

Второй способ - добавить источники, такие как default, в качестве дочерних элементов.

Пример:

Отложенная загрузка JavaScript:

Имена: js, javascript, script

Параметры: data-src

По умолчанию для: <script>

Загружает файлы JavaScript на элемент <script>.

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

В Chrome и Firefox у меня загрузка скрипта происходила сразу, но ее можно инициализировать после другого события, через колбек afterLoad. На примере скрипт загружается после того, как загрузится картинка <picture> из предыдущего примера.

Пример:

Отложенная загрузка видео с Vimeo:

Имена: vimeo

Параметры: data-src

По умолчанию для: -

Загружает видео Vimeo в <iframe>. Устанавливается фрейм предложенный Vimeo, добавляется идентификатор видео в атрибут data-src и имя загрузчика

Пример:

Отложенная загрузка видео с YouTube :

Имена: yt, youtube

Параметры: data-src, data-nocookie

По умолчанию для: -

Загружает видео YouTube в <iframe>. Устанавливается фрейм предложенный youtube, добавляется идентификатор видео в атрибут data-src и имя загрузчика

Если нужно, можно управлять поведением файлов cookie встроенного видео с помощью атрибута data-nocookie="1". Это изменит адрес на youtube-nocookie.com вместо youtube.com.

Пример:

NOOP загрузчик:

Имена: noop, noop-success, noop-error

Параметры: -

По умолчанию для: -

Загрузчик NOOP (или no-operations), как и сказано в названии, ничего не делает. При использовании загрузчика NOOP даже обратные вызовы, такие как beforeLoad или onError не будут срабатывать. Это может быть полезно для разработчиков или для простого, безопасного и быстрого отключения других загрузчиков. Его можно использовать со всеми элементами.

Есть еще два загрузчика NOOP, которые помогают отлаживать код. Загрузчики noop-success и noop-error вернут текущее состояние в Lazy и вызовут правильные колбеки.

Функции обратного вызова и настройки плагина можно посмотреть в теме: Отложенная загрузка изображений

Плагин jquery.lazy на сайте авторов
Плагин jquery.lazy на github
Видео: Oddworld, Hiérophante - Clichés
Аудио: Comfort Fit - "Sorry"

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

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

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