Pourquoi l'attribut « onerror » pour les images se comporte-t-il différemment dans Chrome et Mozilla ?

Résoudre les problèmes de chargement d'images avec l'attribut Onerror

Dans le développement Web, nous rencontrons souvent des scénarios dans lesquels les images ne se chargent pas en raison de liens rompus ou d'erreurs de serveur. L'attribut onerror d'un élément img nous permet de gérer de telles situations en spécifiant une image alternative à afficher. Cependant, les utilisateurs ont signalé des incohérences dans ses fonctionnalités dans différents navigateurs, en particulier dans Chrome et Mozilla.

Pour illustrer le problème, considérons l'extrait de code suivant :

<code class="html"><img src="invalid_image.jpg" onerror="this.src='alternate_image.jpg';"></code>

Ce code tente de charger une image à partir d'une source invalide. Si l'image ne parvient pas à se charger, le gestionnaire d'erreur doit se déclencher, remplaçant l'image cassée par l'image alternative spécifiée. Cependant, les utilisateurs ont constaté que cette approche ne fonctionne pas dans les navigateurs autres qu'Internet Explorer.

La raison sous-jacente de ce comportement est que les navigateurs gèrent différemment l'événement onerror. Certains navigateurs, comme Chrome et Mozilla, déclencheront l'événement plusieurs fois si l'image alternative ne se charge pas, conduisant à une boucle infinie. Pour éviter cela, nous devons annuler le gestionnaire onerror après la première tentative en utilisant le code révisé suivant :

<code class="html"><img src="invalid_image.jpg" onerror="this.onerror=null;this.src='alternate_image.jpg';"></code>

En annulant le gestionnaire onerror, nous garantissons que l'événement ne se déclenchera qu'une seule fois, empêchant ainsi la boucle infinie . Cette approche fonctionne de manière cohérente sur plusieurs navigateurs, notamment Chrome, Mozilla et Internet Explorer.

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!