Ленивая загрузка — это термин, который на слуху уже как минимум 15 лет, за это время было разработано множество техник для реализации «ленивой загрузки» контента на вашем сайте, но всегда с использованием различных трюков с Javascript.
То есть, чтобы браузер не загружал все изображения сайта сразу, а делал это «по требованию», когда пользователю действительно нужно их увидеть (например, при прокрутке), необходимо добавить Javascript (например, используя IntersectionObserver).
Но все изменилось: теперь для этого нужно просто добавить атрибут loading="lazy".
Как использовать ленивую загрузку в изображениях?
Структура HTML проста
<img
src="https://images.unsplash.com/photo-1589432249902-15ab45101111?auto=format&fit=crop&w=1178&q=80"
loading="lazy"
onload="alert('Imagen cargada!');"
/>
Вот и все, ваши изображения будут загружаться «ленивым» способом, когда это необходимо.
Атрибуту loading могут быть присвоены различные значения:
Атрибут onload является частью API, он позволяет выполнить функцию callback, когда изображение будет окончательно загружено.
Какова поддержка браузера?
Как всегда, об этом следует помнить, поскольку не все браузеры могут поддерживать новые атрибуты, текущая ситуация выглядит следующим образом
✉️ Присоединяйтесь к Micro-bytes 🐦 Следите за мной в Twitter ❤️ Поддержите мою работу