JavaScript: Existe-t-il une propriété d'erreur pour les demandes d'image ayant échoué?

Question

Un élément HTML <img> possède une propriété booléenne complete, qui est true si l'image a été chargée avec succès (ou si elle n'a pas encore été affectée src). Il a également un événement onload, qui se déclenche lorsque l'image se charge avec succès, et un événement onerror qui se déclenche lorsque l'image ne se charge pas (par exemple en raison d'un lien brisé, d'une image corrompue ou d'un réseau hors ligne).

maintenant ... ce que je veux savoir est s'il y a une propriété sur un élément d'image qui indique que l'image a déjà le chargement a échoué. Supposons que je ne peux pas utiliser l'événement onerror, car le script peut uniquement avoir accès à l'image après le déclenchement de l'événement. Ce que nous recherchons est une simple propriété de recherche booléenne comme complete qui dit "le chargement de cette image a déjà été tenté, et il a échoué". (Ce que je ne vois pas dans les spécifications, mais je me demande si quelque chose me manque).

Answer 1

Vous pouvez utiliser naturalWidth et naturalHeight pour un effet similaire dans presque tous les navigateurs (IE8 et les versions suivantes ne prennent pas en charge cette propriété). Les propriétés naturalXX contiennent la hauteur/largeur d'origine de l'image, avant les modifications via les attributs/styles HTML/CSS. Donc, si naturalWidth == 0, vous savez que l'image n'a pas pu être chargée.

(Notez que vous ne pouvez pas utiliser les width ou height standards propriétés, puisque ceux retournera la taille de l'image espace réservé notfound.)

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

Si vous êtes juste essayer de changer la introuvable image d'espace réservé, il y a un nifty HTML solution for that:

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

violon: http://jsfiddle.net/K3dwX/1/

PS:Potential solution for IE6+