Maison > interface Web > js tutoriel > le corps du texte

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

Susan Sarandon
Libérer: 2024-11-12 03:43:02
original
821 Les gens l'ont consulté

Can Images Be Loaded Asynchronously with 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) {

   }
});
Copier après la connexion

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);
        }
    });
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal