Атрибут loading: отложенная загрузка изображения
Loading помогает браузеру выбрать момент загрузки изображения. Значение lazy подходит для части картинок ниже первого экрана, когда их загрузку можно отложить до приближения к области просмотра.
Назначение
Loading помогает браузеру выбрать момент загрузки изображения. Значение lazy подходит для части картинок ниже первого экрана, когда их загрузку можно отложить до приближения к области просмотра.
Как это работает
Для проверки создайте собственный файл lesson-preview.jpg и разместите изображение ниже достаточно длинного текста. Width и height резервируют место в макете. Решение о точном пороге загрузки принимает браузер, а не автор страницы.
Пример
<!-- Создайте этот файл в своём учебном проекте. -->
<img src="lesson-preview.jpg" alt="Предварительный вид учебного макета" width="800" height="450" loading="lazy">Что должно получиться
В подходящих условиях сетевой запрос откладывается, а место под картинку остаётся зарезервированным. Эффект проверяется на отдельной странице через Network; песочница справочника внешние изображения не загружает.
Граница применения и частая ошибка
Не назначайте lazy главному изображению первого экрана без измерений: оно может появиться позже нужного. Lazy не гарантирует отсутствие запроса до конкретного пикселя прокрутки. Кеш и настройки браузера меняют наблюдаемое поведение.
Самостоятельная проверка
Откройте страницу с отключённым кешем инструментов разработчика. Сравните eager и lazy, сохранив одинаковую разметку и положение картинки. Отдельно проверьте отсутствие скачка макета при её появлении.