DevGang
Авторизоваться

Ленивая загрузка изображений

Ленивая загрузка изображений - это практика, которая популярна в течение десятилетия, и на то есть веская причина: изображения, как правило, загружаются чаще всего на всей веб-странице, а избегание выгрузки изображений, которые никогда не были видны, экономит трафик пользователя. Есть плагины для отложенной загрузки изображений в каждой среде JavaScript, или вы можете использовать Intersection Observer API , но это стало настолько распространенной практикой, что, вероятно, должен быть браузерный API, чтобы приспособиться к нему... и Chrome реализует именно это. Давайте посмотрим, как будет работать нативный API для отложенной загрузки!

Этот новый API отложенной загрузки сводится к простому атрибуту loading="lazy" тегов img:


Чтобы поэкспериментировать с этим новым API, вы можете добавить атрибут onLoad к изображению:


Когда пользователь прокручивает изображение в пределах диапазона, происходит загрузка и рендеринг. Для этого атрибута есть три значения:

  1. auto - поведение по умолчанию
  2. lazy - загружает изображение, когда оно становится видимым в зависимости от положения прокрутки
  3. eager - загружает изображение сразу, независимо от положения прокрутки

Посмотрите на это демо

Меня очень радует добавление нативного API для старых шаблонов - оно напоминает мне о днях MooTools, которые привели к революции HTML5 в добавлении того, что, как мы знаем, нам было нужно всегда. Что вы думаете об этой новой реализации?

Источник:

#HTML
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться

Присоединяйся в тусовку

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

Попробовать

В этом месте могла бы быть ваша реклама

Разместить рекламу