Урок: отличить незагруженное изображение от скрытого CSS

Назначение

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

Как это работает

На собственной учебной странице разместите img id test-image с осмысленным alt. После загрузки страницы выполните код, а затем проверьте запрос картинки в Network и стили элемента в инспекторе.

Пример

const image = document.querySelector("#test-image");
console.log({
  selectedURL:image.currentSrc,
  complete:image.complete,
  naturalWidth:image.naturalWidth,
  renderedWidth:image.getBoundingClientRect().width
});

Что должно получиться

CurrentSrc показывает выбранный ресурс, naturalWidth — доступную естественную ширину с учётом обработки браузером. Нулевая ширина требует дальнейшей диагностики. Размер на странице можно сопоставить с естественным размером, не смешивая их.

Граница применения и частая ошибка

Complete может быть true даже при ошибке загрузки, поэтому одного этого признака недостаточно. Во время незавершённой загрузки вывод тоже не окончателен. Ненулевая естественная ширина не гарантирует видимость: CSS может скрыть элемент или поместить его вне экрана.

Самостоятельная проверка

Проверьте три варианта: правильный локальный файл, несуществующий путь и display:none у исправной картинки. Запишите сеть, naturalWidth и размер прямоугольника. Для случая 404 исправляйте путь, а не маскируйте проблему стилями.

Связанные материалы

• Диагностика в консоли
• Прототип формы
• Повторные проверки