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

Remplacez les images brisées par jQuery/JavaScript

Les images brisées peuvent gâcher l'esthétique de vos pages Web, laissant aux utilisateurs des expériences incomplètes ou visuellement peu attrayantes. . Heureusement, jQuery et JavaScript offrent des outils pour gérer ce problème avec élégance.

Approche jQuery

Bien que l'on puisse initialement envisager d'utiliser jQuery pour gérer les images cassées, JavaScript fournit une solution plus simple, solution plus efficace. En gérant l'événement onError pour chaque image, vous pouvez réaffecter sa source si son chargement échoue.

Solution JavaScript

L'extrait de code JavaScript ci-dessous capture l'événement onError pour un élément image, mettant à jour son attribut src pour afficher une image d'espace réservé (par exemple, "noimage.gif").

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

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

Vous pouvez également utiliser une syntaxe plus concise sans fonction JavaScript distincte :

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

Compatibilité

Le tableau ci-dessous répertorie les navigateurs qui prennent en charge la fonction d'erreur pour gérer les erreurs. images :

https://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!