Ленивая загрузка (буквально, lazy loading) — это возможность отложить загрузку ненужного прямо сейчас медиаконтента.
<img
src="picture.jpg"
loading="lazy">
<iframe
src="supplementary.html"
loading="lazy">
</iframe>
Ленивая загрузка делает сайт быстрее и экономит трафик, если у пользователя мобильный интернет с ограничениями.
Представим, что у нас есть изображение где-то внизу длинной статьи. Очевидный способ — просто вставить её, как обычно.
<img
src="images/big-image.jpg"
width="1920"
height="1080"
alt="Большая картинка">
И браузер загрузил бы её сразу, как только страница начала бы открываться. Но с ленивой загрузкой можно сделать немного иначе:
<img
src="images/thumbnail.jpg"
data-src="big-image.jpg"
width="720"
height="340"
alt="Большая картинка"
class="lazyload">
Здесь src — маленькая картинка-заглушка, которая загружается
сразу (она быстро
открывается),
а data-src — основная картинка, которая загрузится, только когда
пользователь
докрутит
до неё.
До появления атрибута loading разработчики использовали разные
хитрости на
JavaScript. Например,
писали код, который следил за прокруткой страницы, и когда доходило до картинки, быстро подменял
заглушку на настоящее изображение или загружал картинку целиком.
Тут атрибут loading="lazy" говорит браузеру: «Эй, подожди с этой
картинкой,
пока она
действительно не понадобится». И браузер сам решит, когда загрузить картинку — обычно
загрузка начинается, когда картинка почти попала в область просмотра.
Ленивая загрузка стала настолько полезной, что недавно её добавили в веб-стандарты по-умолчанию. Так что современные браузеры умеют ещё проще:
<img
src="images/big-image.jpg"
width="1920"
height="1080"
loading="lazy"
alt="Большая картинка">
Просто используйте loading="lazy", если у вас длинная страница, и
вы хотите
сэкономить пользователю трафик.
* * *
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.