Pourquoi l'attribut onerror pour les éléments d'image se comporte-t-il de manière incohérente dans les navigateurs ?

Utilisation de l'attribut onerror pour les éléments d'image

En HTML, l'attribut onerror vous permet de spécifier une action à entreprendre lorsqu'une image échoue à charger. Cependant, il a été observé que cet attribut ne fonctionne pas toujours comme prévu dans certains navigateurs.

Dans l'exemple fourni, où l'attribut onerror est utilisé pour changer la source des images cassées, le comportement diffère selon les navigateurs. . Pour résoudre ce problème, une approche modifiée est requise.

Les extraits de code mis à jour ci-dessous résolvent le problème dans Chrome et Mozilla tout en conservant la compatibilité avec IE :

<code class="css">.posting-logo-div {
}
.posting-logo-img {
  height: 120px;
  width: 120px;
}
.posting-photo-div {
  height: 5px;
  width: 5px;
  position: relative;
  top: -140px;
  left: 648px;
}
.posting-photo-img {
  height: 240px;
  width: 240px;
}</code>

<code class="html"><div id="image" class="posting-logo-div">
  <img src="invalid_link"
       onerror="this.onerror=null;this.src='https://placeimg.com/200/300/animals';"
   class="posting-logo-img"
  />
</div>
<div id="photo" class="posting-photo-div">
  <img src="invalid_link"
       onerror="this.onerror=null;this.src='https://placeimg.com/200/300/animals';"
       class="posting-photo-img"
  />
</div></code>

En annulant le gestionnaire d'erreur utilisant this.onerror=null ; avant de changer la source de l'image, nous pouvons éviter une boucle infinie qui pourrait se produire si l'URL de sauvegarde est également invalide.

Une démonstration en direct de cette approche peut être trouvée sur : http://jsfiddle.net/oLqfxjoz/

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!