Les images peuvent-elles être chargées de manière asynchrone avec jQuery ?

Chargement d'image asynchrone avec jQuery

Question :

Tentative de chargement asynchrone d'une image externe utiliser jQuery avec le code suivant :

$.ajax({ 
   url: "http://somedomain.com/image.jpg", 
   timeout:5000,
   success: function() {

   },
   error: function(r,x) {

   }
});

entraîne une réponse d'erreur. Le chargement d'images asynchrones est-il possible avec jQuery ? Sinon, comment charger les images de manière asynchrone ?

Solution :

Le chargement d'images asynchrones est en effet possible avec jQuery. Cependant, la méthode $.ajax() n'est pas adaptée à cette tâche. Au lieu de cela, l'approche préférée consiste à créer un nouvel élément d'image de manière dynamique et à y attacher des gestionnaires d'événements :

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);
        }
    });

Cette méthode utilise le mécanisme natif de chargement d'image HTML5, qui déclenche l'événement de chargement lorsque l'image a été entièrement chargé. En vérifiant les propriétés complete, naturalWidth et naturalHeight, vous pouvez déterminer si l'image a été chargée avec succès et éviter les avertissements d'image brisée.

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!