Comment puis-je remplacer les images cassées par jQuery ou Plain JavaScript ?

Remplacer les images cassées par jQuery

Avoir des images cassées affichées sur une page Web peut être frustrant pour les utilisateurs. Heureusement, JavaScript propose diverses méthodes pour résoudre ce problème.

Une approche consiste à utiliser les capacités de filtrage de jQuery pour identifier et remplacer les images cassées. Pour ce faire :

1. Utilisez le sélecteur $("img") de jQuery pour obtenir toutes les images de la page.
2. Filtrez l'ensemble d'images à l'aide de la fonction .error() pour identifier les images cassées. images.
3. Pour chaque image cassée, remplacez l'attribut src par l'image de remplacement souhaitée, par exemple "pas d'image" par défaut. placeholder.

Cependant, par souci de simplicité, il est souvent plus facile d'utiliser du JavaScript pur pour gérer les images cassées.

Solution JavaScript :

La L'événement onError peut être utilisé pour réaffecter l'attribut source lorsqu'une image ne parvient pas à load :

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

Implémentez cette fonction dans le HTML :

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

Alternativement, l'événement onError peut être géré directement dans le HTML sans fonction :

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

Référez-vous au tableau suivant pour connaître la compatibilité du navigateur avec l'erreur installation :

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!