11

Flying Images – высокопроизводительный плагин отложенной загрузки

Предупреждение: Летающие изображения созданы мной, поэтому я буду предвзятым!

Как работает отложенная загрузка?

Нормальное изображение в HTML выглядит так:

<img src="sample.jpg" width="100%"/>

Плагины отложенной загрузки переписывают код следующим образом:

<img data-src="sample.jpg" width="100%"/>

Как вы заметили, srcатрибут был изменен на data-src.

Поскольку нет src, браузер изначально не загружает это изображение. Позже небольшой код JavaScript проверяет, находится ли изображение в области просмотра (область просмотра пользователя), и если оно внутри, data-srcвозвращается к тому, srcкакой браузер запускает загрузку и отображение изображения.

Что такое нативная отложенная загрузка?

Chrome поставляется с «родной ленивой загрузкой». Вы можете прочитать об этом здесь .

Преимущество нативной отложенной загрузки заключается в том, что нет необходимости в JavaScript и, как правило, она выполняется намного быстрее, так как браузер выполняет ее «изначально».

Код выглядит так:

<img src="sample.jpg" loading="lazy" width="100%"/>

Что такое летающие изображения?

обложка летающих изображений

Flying Images – это высокопроизводительный плагин для отложенной загрузки. Он использует «родную» отложенную загрузку браузера, если она доступна, в противном случае используйте обычный JavaScript для отложенной загрузки.

«Летающие изображения» также могут загружать изображения еще до того, как изображения появятся в области просмотра.

Вы боитесь ленивой загрузки, потому что это ухудшает работу пользователей?

обзор летающих изображений

Чем летающие изображения отличаются от других плагинов для отложенной загрузки?

  • Использует встроенную отложенную загрузку – используйте встроенную отложенную загрузку, если она доступна (в настоящее время поддерживается только в Chrome), в противном случае используйте JavaScript для отложенной загрузки изображений.
  • Загружать изображения еще до входа в область просмотра – в то время как другие плагины загружают изображения, когда они находятся «внутри» области просмотра, летающие изображения загружают их, когда они собираются войти в область просмотра.
  • Крошечный JavaScript – всего 0,5 КБ, сжатый, уменьшенный.
  • При желании можно использовать только нативный – хотите поддерживать только Chrome? Вы можете переключиться на «только нативный», при котором JavaScript не внедряется.
  • Переписывает весь HTML-код – никогда не пропустите изображение из-за ленивой загрузки (даже если оно добавлено плагинами галереи).
  • Прозрачный заполнитель – ко всем изображениям добавляется крошечный прозрачный base64. Больше нет мерцания при загрузке изображений.
  • Исключить ключевые слова – почти все плагины отложенной загрузки предоставляют функцию исключения, однако летающие изображения также могут исключать изображения из родительского узла изображений. Полезно, если у вашего изображения нет имени класса.
  • Поддерживает браузеры с отключенным IE и JavaScript – все изображения загружаются мгновенно, если это Internet Explorer или даже если JavaScript полностью отключен (с использованием noscriptтега).
0 оценок, среднее: 0,00 из 50 оценок, среднее: 0,00 из 50 оценок, среднее: 0,00 из 50 оценок, среднее: 0,00 из 50 оценок, среднее: 0,00 из 5 (0 оценок, среднее: 0,00 из 5)
Для того чтобы оценить запись, вы должны быть зарегистрированным пользователем сайта.
Загрузка...
Scroll Up