Comment charger des images de manière asynchrone avec jQuery : un guide étape par étape

Chargement asynchrone d'images avec jQuery

La coordination du chargement et de l'affichage des images sur votre page Web peut avoir un impact significatif sur ses performances. Le chargement asynchrone des images garantit une perturbation minimale de l'expérience utilisateur en accordant un contrôle sur l'ordre et le calendrier de chargement des images. jQuery, une bibliothèque JavaScript polyvalente, propose des méthodes pratiques pour gérer les tâches asynchrones, notamment le chargement d'images.

Chargement d'images asynchrones à l'aide de XMLHttpRequest

Une approche pour charger des images de manière asynchrone consiste à en utilisant l'objet XMLHttpRequest (XHR). Cependant, cette méthode pose des défis, en particulier lorsque vous rencontrez des erreurs ou définissez des délais d'attente pour intercepter les réponses 404.

Méthode alternative : manipulation des éléments de l'image

Une méthode plus fiable pour le chargement asynchrone images implique de créer un élément img, de définir son attribut source sur l'URL de l'image et d'observer son événement de chargement. Cette approche basée sur les événements offre un meilleur contrôle sur la gestion des erreurs de chargement et la vérification de la disponibilité des images.

var img = $("<img />").attr('src', 'http://somedomain.com/image.jpg')
    .on('load', function() {
        if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
            alert('Broken image!');
        } else {
            $("#something").append(img);
        }
    });

Dans cet extrait de code :

• Un nouvel élément img est créé et sa source est défini sur l'URL de l'image souhaitée.
• L'écouteur d'événement on('load') est attaché à l'élément img, qui sera invoqué une fois l'image entièrement chargé.
• Dans l'écouteur d'événements, les propriétés complete, naturalWidth et naturalHeight sont vérifiées pour valider si l'image a été chargée avec succès. Si l'une de ces conditions n'est pas remplie, un message d'erreur s'affiche.
• Si l'image se charge avec succès, elle est ajoutée à un fichier
  élément avec l'ID "quelque chose".

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!