jquery définit l'image par défaut

Dans la conception Web, il est souvent nécessaire d'insérer des images dans la page pour enrichir le contenu de la page et améliorer l'expérience utilisateur. Cependant, dans le développement réel, des problèmes tels que l'échec du chargement des images et leur inexistence se produiront inévitablement, et les images vierges sur la page affecteront souvent la perception de l'utilisateur. Afin de résoudre ce problème, nous pouvons améliorer l'expérience utilisateur en définissant l'image par défaut. Pour cela, nous pouvons utiliser la bibliothèque jQuery. Examinons de plus près comment utiliser jQuery pour définir une image par défaut.

1. Chargez la bibliothèque jQuery

Tout d'abord, nous devons introduire la bibliothèque jQuery dans le fichier HTML :

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

La méthode CDN est utilisée pour introduire la bibliothèque jQuery ici. également être introduit localement.

2. Définir l'image par défaut

Ensuite, nous devons définir l'image par défaut dans la page HTML. Dans les projets réels, nous pouvons définir une image avec une taille appropriée et un contenu correspondant comme image par défaut en fonction des besoins. Par exemple, nous pouvons ajouter le code HTML suivant au code :

<img src="default.jpg" alt="默认图片">

Le default.jpg ici est l'image par défaut que nous avons définie.

3. Utilisez jQuery pour définir l'image par défaut

Voyons maintenant comment utiliser la bibliothèque jQuery pour définir l'image par défaut.

1. Vérifiez si l'image est chargée avec succès

Nous devons d'abord détecter si l'image est chargée avec succès. Si l'image se charge avec succès, l'image elle-même est affichée ; si le chargement de l'image échoue, l'image par défaut que nous avons définie auparavant est utilisée. Le code est le suivant :

$('img').each(function() {
    if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
        $(this).attr('src', 'default.jpg');
    }
});

$('img') signifie ici sélectionner toutes les images, et sa méthode each() signifie parcourir chaque élément. Lorsque l'image ne se charge pas correctement, utilisez la méthode attr() pour remplacer l'attribut src de l'image par l'image par défaut que nous avons définie.

2. Utiliser la surveillance des événements

Nous pouvons également utiliser la surveillance des événements pour implémenter des opérations de chargement d'images réussies et échouées :

$('img').on('error', function() {
    $(this).attr('src', 'default.jpg');
});

$('img') signifie ici pour sélectionner toutes les images, utilisez le on(. ) méthode Pour écouter l'événement d'erreur de l'image. Lorsque l'événement est déclenché, utilisez la méthode attr() pour remplacer l'attribut src de l'image par l'image par défaut que nous avons définie.

Il convient de noter que les deux méthodes ci-dessus peuvent être utilisées, mais la deuxième méthode doit être exécutée uniquement en cas d'erreur de chargement de l'image, tandis que la première méthode peut définir l'image par défaut avant le chargement de l'image.

4. Résumé

Jusqu'à présent, nous avons terminé l'opération d'utilisation de jQuery pour définir l'image par défaut. De cette façon, même en cas d'erreur de chargement de l'image, l'expérience utilisateur peut être mieux garantie et la page peut être rendue plus complète et plus belle. Dans les projets réels, nous pouvons utiliser cette méthode de manière flexible pour améliorer l'expérience utilisateur du site Web en fonction des besoins et des circonstances spécifiques.

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!