JavaScript définit l'affichage de l'image par défaut en utilisant onerror au lieu de l'astuce alt

JavaScript définit l'affichage de l'image par défaut en utilisant onerror au lieu de l'astuce alt_javascript

PHP中文网

Libérer： 2016-05-16 15:12:59

original

1497 Les gens l'ont consulté

Code JavaScript

　//图像加载出错时的处理
function errorImg(img) {
img.src = "默认图片.jpg";
img.onerror = null;
}

Copier après la connexion

Code HTML

<img width="32" height="32" src="1.jpg" onerror="errorImg(this)" />

Copier après la connexion

Par souci de beauté, l'image fork ne sera pas affichée lorsque l'image de la page Web n'existe pas

Quand c'est le cas Lorsque la page est affichée, si l'image est déplacée ou perdue, une image avec un X sera affichée sur la page, ce qui affecte grandement l'expérience utilisateur. Même si l'attribut alt est utilisé pour donner un message d'invite "Image XX", cela n'aura pas beaucoup d'effet.
En fait, cela peut être géré comme ceci : lorsque l'image n'existe pas, l'événement onerror sera déclenché. Nous pouvons faire quelques travaux correctifs dans cet événement, comme :

<. 🎜>1. Laissez masquer cet élément d'image :

为了美观当网页图片不存在时不显示叉叉图片 src="图片的url地址" alt="图片XX" onerror="this.style.display=&#39;none&#39;"/>

Copier après la connexion

2. Remplacez-le par l'image par défaut :

为了美观当网页图片不存在时不显示叉叉图片 src="图片的url地址" alt="图片XX" 
onerror="this.src=&#39;默认图片的url地址&#39;"/>

Copier après la connexion

Remarque : s'il est mal utilisé, cela provoquera une boucle infinie dans les navigateurs basés sur IE. Par exemple : lorsque [l'adresse URL de l'image par défaut] ne parvient pas à se charger (par exemple, lorsque la vitesse du réseau est relativement lente) ou n'existe pas, elle sera chargée à plusieurs reprises, provoquant éventuellement une erreur de débordement de pile.

Par conséquent, les deux méthodes suivantes doivent être utilisées pour résoudre le problème :

a Remplacez le code d'erreur par d'autres méthodes de traitement ou assurez-vous que l'image par défaut est dans. une erreur est suffisamment petite et existe.

b. Pour contrôler que l'événement onerror ne soit déclenché qu'une seule fois, vous devez ajouter cette phrase : this.onerror=null après l'avoir ajouté, ce sera comme suit :

<🎜; >

为了美观当网页图片不存在时不显示叉叉图片 src="图片的url地址" alt="图片XX" 
onerror="this.src=&#39;默认图片的url地址;this.onerror=null&#39;"/>

Copier après la connexion

Après les tests, la méthode ci-dessus est prise en charge dans toutes les versions des navigateurs IE et Google et Firefox.

Ce qui précède montre comment JavaScript utilise onerror pour définir l'affichage de l'image par défaut au lieu de la technique alt_javascript. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !