Maison > interface Web > js tutoriel > le corps du texte

Solution au problème de la liaison d'un événement d'erreur à img dans jquery

黄舟
Libérer: 2017-06-27 11:23:01
original
2459 Les gens l'ont consulté

Par exemple :

<img src = &#39;xxxx.jpg&#39; >

$(&#39;img&#39;).error(function(){
    $(this).attr(&#39;src&#39;,"默认图片");
})
Copier après la connexion

Après des tests, il a été constaté que si l'image originale n'existe pas, l'image sur la page continuera de scintiller. Comment résoudre ce problème ?

$(window).load(function() { 
  $(&#39;img&#39;).each(function() {    if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) { 
      this.src = &#39;http://www.tranism.com/weblog/images/broken.gif&#39;; 
      } 
   });
});
Copier après la connexion

Je ne comprends pas très bien. L'image originale fait-elle référence à xxxx.jpg ? Si le chemin de l'image par défaut de votre code est également erroné (c'est-à-dire que l'image par défaut n'existe pas), elle entrera dans une boucle infinie, donc elle continue de clignoter et de clignoter à cause de l'erreur constante

vérifie d'abord si l'image est chargée avec succès, puis lie l' événement si ça échoue. Et remplacez-le une seule fois.

<img src="xxxx.jpg" alt="" /><script>jQuery(document).ready(function(){
    jQuery(&#39;img&#39;).each(function(){        var error = false;        if (!this.complete) {
            error = true;
        }        if (typeof this.naturalWidth != "undefined" && this.naturalWidth == 0) {
            error = true;
        }        if(error){
            $(this).bind(&#39;error.replaceSrc&#39;,function(){                this.src = "default_image_here.png";

                $(this).unbind(&#39;error.replaceSrc&#39;);
            }).trigger(&#39;load&#39;);
        }
    });
});</script>
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal