Maison > Article > interface Web > 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 :
Créez l'élément d'image :
var img = $("<img />");
Définissez l'attribut source :
img.attr('src', 'http://somedomain.com/image.jpg');
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!