Comment puis-je gérer efficacement les images cassées dans mes pages Web à l'aide de jQuery ou de JavaScript ?

Gestion des images cassées avec jQuery ou JavaScript

Problème :
Une page Web avec de nombreuses images cassées instances d'image en raison de leur indisponibilité.

jQuery Approche :

1. Acquérir les éléments de l'image : $("img").
2. Filtrer les images cassées : $brokenImages = $("img").filter(function( ) { return this.complete && !this.naturalWidth; }).
3. Remplacez la propriété 'src' par une image d'espace réservé : $brokenImages.attr("src", "/broken-image.png").

Événement JavaScript onError :

Une approche alternative consiste à gérer le événement onError pour chaque image afin de réaffecter directement sa source.

1. Définir une gestion des erreurs d'image fonction :

function imgError(image) {
    image.onerror = "";
    image.src = "/images/noimage.gif";
    return true;
}

2. Utiliser la fonction en HTML :

<img src="image.png" onerror="imgError(this);"/>

3. Ou sans fonction :

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

Compatibilité des navigateurs :

Pour le Pour l'approche de gestion des événements onError, veuillez vous référer au tableau de compatibilité à l'adresse :

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

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!