Comment vérifier si une image existe avec jquery

Pour les sites Web qui doivent afficher des images, nous pouvons stocker le chemin de l'image dans la base de données ou dans les données renvoyées via l'API. Lorsque nous devons afficher des images sur la page, nous rencontrons parfois des situations où l'image n'existe pas. À ce stade, l'affichage d'une image vierge sur la page apportera une mauvaise expérience à l'utilisateur. Afin d'améliorer l'expérience utilisateur, nous pouvons utiliser jQuery pour vérifier si l'image existe et la traiter en conséquence.

1. Utilisez jQuery pour vérifier si l'image existe

Nous pouvons utiliser la méthode .load() pour détecter si l'image est chargée avec succès. La méthode .load() déclenche un événement lorsque l'élément sélectionné a fini de se charger. Si l'image est chargée avec succès, l'événement de chargement sera déclenché ; sinon, l'événement d'erreur sera déclenché, comme indiqué ci-dessous :

$('img').on('load', function() {
  console.log('Image is loaded');
}).on('error', function() {
  console.log('Image is not loaded');
});

Dans l'exemple ci-dessus, nous sélectionnons d'abord tous les éléments de l'image, puis écoutons leur chargement et événements d'erreur. Lorsque l'image réussit, lors du chargement, affiche "L'image est chargée", sinon affiche "L'image n'est pas chargée".

2. Gérer la situation lorsque l'image n'existe pas

Lorsque nous détectons que l'image n'existe pas, nous pouvons la gérer des manières suivantes :

1. Afficher l'image par défaut

Dans le cas où l'image n'existe pas, nous pouvons ajouter une image par défaut "Aucune image pour le moment" pour chaque image de votre site Web. Lorsqu'il est détecté que l'image n'existe pas, on peut afficher l'image par défaut en modifiant l'attribut src de l'élément image Le code est le suivant :

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

Dans le code ci-dessus, lorsqu'il est détecté que l'image n'existe pas. existe, nous modifions l'attribut src de cet élément en default.jpg pour afficher l'image par défaut.

2. Afficher l'invite d'échec de chargement de l'image

Nous pouvons également afficher un texte d'invite à l'emplacement de l'image lorsque le chargement de l'image échoue pour rappeler à l'utilisateur que l'image actuellement affichée n'a pas pu se charger. Le code est le suivant :

$('img').on('error', function() {
  $(this).after('<p class="load-error">图片加载失败</p>');
});

Dans le code ci-dessus, nous utilisons la méthode .after() pour ajouter un élément

après l'élément image pour afficher le texte d'invite en cas d'échec de chargement de l'image.

3. Masquer le conteneur d'image

Lorsque l'image n'existe pas, nous pouvons également masquer son conteneur (tel que l'élément

) pour rendre la mise en page plus belle. Le code est le suivant :

$('img').on('error', function() {
  $(this).parent().hide();
});

Dans le code ci-dessus, lorsque nous détectons que l'image n'existe pas, nous utilisons la méthode .parent() pour sélectionner l'élément parent de l'image actuelle, puis utilisons la méthode .hide() méthode pour le cacher.

3. Résumé

Dans cet article, nous avons présenté comment utiliser jQuery pour vérifier si une image existe et la traiter en conséquence. Lorsque nous faisons face à une situation où les images n'existent pas, nous pouvons afficher des images par défaut, inviter du contenu ou masquer des conteneurs en fonction des besoins réels pour améliorer l'expérience utilisateur et la mise en page.

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn