HTML-атрибут loading
HTML-атрибут loading: применимые элементы, формат значения, пример разметки, частые ошибки и данные совместимости браузеров.
«loading» отмечено как экспериментальное в MDN Browser Compatibility Data. Предусмотрите базовый вариант и протестируйте целевые браузеры.
Суть темы
Практический смысл «loading» связан с тем, чтобы уточнить поведение или данные элемента в допустимом для него контексте. Атрибут loading применяется к audio, iframe, img, video и браузер разбирает значение по правилам соответствующего элемента. Контрольная проверка «loading» проходит в адаптивной навигации на экране 320 px, а наблюдаемой точкой служит перестроение при смене writing-mode.
Где применяется: audio, iframe, img, video.
Перед применением «loading» сформулируйте ожидаемое поведение, затем проверяйте допустимые элементы и формат значения по спецификации. Для «loading» такое сравнение показывает реальную причину изменения.
Синтаксис loading
Минимальная запись «loading» нужна для отделения самой возможности от стилей и разметки проекта. Проверьте фрагмент отдельно перед переносом.
<img src="photo.webp" loading="lazy" width="960" height="640" alt="Описание фотографии">Как работает loading
Чтобы объяснить работу «loading», проследите путь от структуры и входного значения до отображения или поведения. Атрибут loading применяется к audio, iframe, img, video и браузер разбирает значение по правилам соответствующего элемента. Контрольная точка для «loading» — результат при отключённом JavaScript.
Проверка в проекте
- Проверяйте допустимые элементы и формат значения по спецификации; результат относится непосредственно к «loading».
- Пройти компонент клавишами Tab, Enter, Space и стрелками, если они предусмотрены при разборе «loading».
- Проверьте «loading» в адаптивной навигации на экране 320 px через перестроение при смене writing-mode и запишите наблюдаемое изменение.
Используйте «loading», когда требуется уточнить поведение или данные элемента в допустимом для него контексте; подтвердите выбор предметной проверкой: проверяйте допустимые элементы и формат значения по спецификации. Для «loading» более простой вариант предпочтителен, если он сохраняет тот же смысл и поведение.
Практика с loading
Проверьте «loading» на небольшом макете с длинным текстом, клавиатурным управлением и узким экраном. Отдельная проверка для «loading»: проверяйте допустимые элементы и формат значения по спецификации.
Сценарий: в адаптивной навигации на экране 320 px.
Ошибки при работе с loading
Каскад
Значение loading вне допустимого элемента или формата может быть проигнорировано браузером — это предметный риск для «loading».
Поддержка
Непредсказуемое наследование значения из внешнего компонента при использовании «loading».
Контекст
Фиксированные размеры, которые перестают вмещать реальное содержимое; для «loading» проверьте это отдельно.
Поддержка loading
Для «loading» таблица собрана из закреплённой версии MDN Browser Compatibility Data. Указанная версия браузера показывает первое заявленное появление базовой поддержки «loading»; окончательное решение принимайте по аудитории конкретного проекта.
Спецификация: источник 1.
Вопросы о loading
Как понять, что «loading» выбрано правильно?
«loading» выбрано правильно, когда оно решает задачу «уточнить поведение или данные элемента в допустимом для него контексте», сохраняет результат в адаптивной навигации на экране 320 px и проходит предметную проверку: проверяйте допустимые элементы и формат значения по спецификации.
Нужен ли запасной вариант для «loading»?
Для «loading» запасной вариант обязателен: возможность отмечена как экспериментальная. Сначала реализуйте базовое поведение «loading», затем подключайте улучшение после проверки поддержки.
Спецификации и источники
Синтаксис и статус проверяются по HTML Living Standard, спецификациям CSS и MDN Browser Compatibility Data. Примеры и объяснения подготовлены для этого сервиса.