JavaScript: есть ли свойство ошибки для неудачных запросов изображений?

Question

Элемент HTML <img> имеет логическое свойство complete, которое равно true, если изображение успешно загружено (или если ему еще не присвоено src). Он также имеет событие onload, которое срабатывает при успешной загрузке изображения, и событие onerror, которое вызывается, когда изображение не загружается (например, из-за неработающей ссылки, поврежденного изображения или автономной сети).

Теперь ... я хочу знать, есть ли в элементе изображения свойство, которое обозначает, что у изображения уже не удалось загрузить . Предположим, что я не могу использовать событие onerror, потому что скрипт может иметь доступ к изображению только после того, как событие сработало. Мы ищем простое логическое свойство поиска, такое как complete, которое говорит, что «загрузка этого изображения уже была предпринята, и она не удалась». (Который я не вижу в спецификации, но мне интересно, что я что-то упустил).

Answer 1

Вы можете использовать naturalWidth и naturalHeight для аналогичного эффекта почти во всех браузерах (IE8 и ниже не поддерживают это свойство). Свойства naturalXX содержат исходную высоту / ширину изображения перед изменением с помощью атрибутов / стилей HTML / CSS. Так что если naturalWidth == 0, вы знаете, что изображение не удалось загрузить.

(Обратите внимание, что вы не можете использовать стандартные свойства width или height, поскольку они возвращают размер не найденного заполнителя изображения.)

document.getElementById("image").naturalWidth ? "success" : "fail"

Если вы просто пытаетесь изменить изображение не найденного заполнителя, для этого есть отличное решение HTML :

<object data="https://stackoverflow.com/does-not-exist.png">
  <img src="https://stackoverflow.com/content/img/so/logo.png">
</object>

скрипка: http://jsfiddle.net/K3dwX/1/

PS: Потенциальное решение для IE6 +