Question jQuery / JavaScript pour remplacer les images brisées


J'ai une page Web qui comprend un tas d'images. Parfois, l'image n'est pas disponible, de sorte qu'une image brisée est affichée dans le navigateur du client.

Comment puis-je utiliser jQuery pour obtenir l'ensemble des images, le filtrer sur des images brisées, puis remplacer le src?


- Je pensais qu'il serait plus facile de le faire avec jQuery, mais il était plus simple d'utiliser une solution JavaScript pure, c'est-à-dire celle fournie par Prestaul.


483
2017-09-18 13:53


origine


Réponses:


Manipulez le onError événement pour que l'image réaffecte sa source en utilisant JavaScript:

function imgError(image) {
    image.onerror = "";
    image.src = "/images/noimage.gif";
    return true;
}
<img src="image.png" onerror="imgError(this);"/>

Ou sans fonction JavaScript:

<img src="image.png" onError="this.onerror=null;this.src='/images/noimage.gif';" />

Le tableau de compatibilité suivant répertorie les navigateurs prenant en charge la fonction d'erreur:

http://www.quirksmode.org/dom/events/error.html


659
2017-09-18 14:04



J'utilise le construit error gestionnaire:

$("img").error(function () {
  $(this).unbind("error").attr("src", "broken.gif");
});

error() déconseillé dans 1.8 ou plus.


182
2017-10-03 19:18



Au cas où quelqu'un comme moi essaie de joindre le error événement à un HTML dynamique img tag, je tiens à souligner que, il y a un piège:

Apparemment img événements d'erreur ne pas faire de bulles dans la plupart des navigateurs, contrairement à ce que la norme dit.

Donc, quelque chose comme la volonté suivante pas travailler:

$(document).on('error', 'img', function () { ... })

J'espère que cela sera utile à quelqu'un d'autre. J'aurais aimé voir ça ici dans ce fil. Mais je ne l'ai pas fait. Donc, je l'ajoute


110
2018-06-15 13:54



Voici une solution autonome:

$(window).load(function() {
  $('img').each(function() {
    if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
      // image was broken, replace with your new image
      this.src = 'http://www.tranism.com/weblog/images/broken_ipod.gif';
    }
  });
});

51
2017-09-18 14:26



Je crois que c'est ce que vous recherchez: jQuery.Preload

Voici l'exemple de code de la démo, vous spécifiez le chargement et les images non trouvées et vous êtes tous ensemble:

$('#images img').preload({
    placeholder:'placeholder.jpg',
    notFound:'notfound.jpg'
});

32
2017-09-18 14:05



$(window).bind('load', function() {
$('img').each(function() {
    if((typeof this.naturalWidth != "undefined" &&
        this.naturalWidth == 0 ) 
        || this.readyState == 'uninitialized' ) {
        $(this).attr('src', 'missing.jpg');
    }
}); })

La source: http://www.developria.com/2009/03/jquery-quickie---broken-images.html


23
2018-03-25 23:57



Voici une manière rapide et sale de remplacer toutes les images cassées, et il n'est pas nécessaire de changer le code HTML;)

http://ashfaqahmed.net/jquery-replacing-broken-images/

$("img").each(function()
{
    var NoImageUrl = "http://www.acsu.buffalo.edu/~rslaine/imageNotFound.jpg";
    var image = $(this);
    var ThisHeight = $(image).css("height");
    var ThisWidth = $(image).css("width");
    if (image.context.naturalWidth == 0 || image.readyState == 'uninitialized')
    {
        $(image).unbind("error").attr("src", NoImageUrl).css(
        {
            height: ThisHeight,
            width: ThisWidth,
        });
    }
});

9
2018-02-18 15:59