Comment définir des délais d'attente pour le chargement asynchrone d'images avec jQuery ?

Chargement asynchrone des images avec jQuery

Il est essentiel de charger les images de manière asynchrone pour éviter de bloquer le rendu de la page et garantir une expérience utilisateur fluide. Bien que $.ajax() soit un outil précieux pour les opérations asynchrones, il n'est pas explicitement conçu pour le chargement d'images.

Utilisation de la méthode .load de jQuery

jQuery fournit un outil .load pratique. Méthode load() qui peut charger du contenu externe, y compris des images. Cependant, définir un délai d'attente pour le chargement de l'image n'est pas simple à l'aide de .load().

Alternative à l'aide d'un élément d'image natif

Une approche alternative consiste à créer un nouvel élément d'image directement et définissez son attribut source. Cela permet plus de flexibilité dans la gestion du chargement des images.

Définition d'un délai d'expiration

Pour définir un délai d'expiration pour le chargement asynchrone des images, suivez ces étapes :

1. Créez l'élément d'image :

   var img = $("<img />");

2. Définissez l'attribut source :

   img.attr('src', 'http://somedomain.com/image.jpg');

3. Gérer l'événement de chargement :

   img.on('load', function() {
       // Checks if the image has loaded successfully
       if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
           // Image failed to load
           alert('broken image!');
       } else {
           // Image loaded successfully
           $("#something").append(img);
       }
   });

Lorsque l'image est chargée avec succès, vous pouvez l'ajouter à l'emplacement souhaité dans votre HTML. Si l'image ne parvient pas à se charger (par exemple, 404), vous pouvez gérer l'erreur comme bon vous semble.

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!