Jquery .ajax peut charger des images ?

Question

Je veux charger des images externes sur ma page de façon asynchrone à l’aide de jquery et moi avons essayé ce qui suit :

Mais toujours, il renvoie l’erreur, est-il encore possible de charger l’image comme ça ? J’ai essayé d’utiliser la méthode .load et il fonctionne mais aucune idée comment je peux configurer le délai d’attente si l’image n’est pas disponible (404), une idée ?

Merci

édité : quelqu'un peut m’aider avec la phrase "BOLD" ?

Answer 1

Aucun besoin d’ajax. Vous pouvez créer un nouvel élément de l’image, affectez à son attribut de la source et placez-le quelque part dans le document une fois qu’il le chargement est terminé :

Answer 2

SI VOUS AVEZ VRAIMENT BESOIN D'UTILISER AJAX...

Je suis tombé sur usecases où le onload gestionnaires n'étaient pas le bon choix. Dans mon cas, lors de l'impression via javascript. Il y a donc en fait deux options pour utiliser AJAX style:

Solution 1

Utilisation Base64 données d'image et d'un service d'imagerie. Si vous avez votre propre site web, vous pouvez ajouter une JSP/PHP script de REPOS qui offre des images en Base64. Maintenant, comment est-ce utile? Je suis tombé sur un endroit frais à une nouvelle syntaxe de codage de l'image:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhE..."/>

De sorte que vous pouvez charger l'Image en Base64 de données à l'aide d'Ajax et puis à la fin, vous de construire la Base64 chaîne de données pour l'image! Très amusant :). Je recommande d'utiliser ce site http://www.freeformatter.com/base64-encoder.html pour le codage de l'image.

$.ajax({ 
    url : 'BASE64_IMAGE_REST_URL', 
    processData : false,
}).always(function(b64data){
    $("#IMAGE_ID").attr("src", "data:image/png;base64,"+b64data);
});

Solution2:

Astuce le navigateur à utiliser sa mémoire cache. Cela vous donne un bon fadeIn() lorsque la ressource est dans le cache des navigateurs:

var url = 'IMAGE_URL';
$.ajax({ 
    url : url, 
    cache: true,
    processData : false,
}).always(function(){
    $("#IMAGE_ID").attr("src", url).fadeIn();
});   

Toutefois, les deux méthodes ont des inconvénients: Le premier ne fonctionne que sur les navigateurs modernes. La seconde a la performance des pépins et repose sur l'hypothèse de la façon dont le cache sera utilisé.

cheers, va

Answer 3

<pre><code></code><p>Devrait être meilleur qu’ajax, parce que si c’est une galerie et vous êtes une boucle dans une liste de pics, si l’image est déjà dans le cache, il ne sera pas envoyer une autre demande au serveur. Il demande dans le cas de jQuery/ajax et reviendra un HTTP 304 (non modifié) et ensuite utiliser image originale du cache si son déjà là. La méthode ci-dessus réduit une requête vide au serveur après la première boucle d’images dans la Galerie.</p></pre>

Answer 4

non, mais vous pouvez le faire:

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

Answer 5

utilisez .load pour charger votre image. pour tester si vous obtenez une erreur (disons 404), vous pouvez effectuer les opérations suivantes:

 $("#img_id").error(function(){
  //$(this).hide();
  //alert("img not loaded");
  //some action you whant here
});
 

vigil - L'événement .error () ne se déclenchera pas lorsque l'attribut src est vide pour une image.