chargement image externe de manière asynchrone en utilisant jQuery

Question

je la situation suivante:

je dois charger plusieurs images externes hébergées par 3ème partie, avec par exemple URL comme celui-ci;

http://externaldomain.com/img/a/b/someimage.jpg

Cependant le chargement d'une image peut coûter jusqu'à 15 secondes !! (fou je sais), donc je pense à charger ces images de manière asynchrone en utilisant jQuery. Voilà où je suis coincé, j'ai essayé les 2 méthodes suivantes:

var img = new Image();    
$(img).load(function() {         
    containerForImg.removeClass('loading-image').append(this); 
}) 

.attr('src', imgFullPath) 
.attr('alt', imgAltText); 

Ce que je pense que le code ci-dessus ne se charge pas l'image de manière asynchrone parce que la demande continue d'attente pour toutes les images avant qu'il ne soit terminé.

La deuxième méthode est:

J'ai créé un gestionnaire générique (.ashx) pour télécharger l'image en utilisant WebRequest et WebResponse classe de .NET et l'appel avec ce gestionnaire $.ajax() méthode jQuery, mais ce résultat dans la l'écran ne répond pas s'il y a beaucoup d'image. Je peux confirmer que la demande au gestionnaire est asynchrone, mais je suis curieux de savoir si l'appel dans le gestionnaire est asynchrone ou non.

La conclusion est, les deux méthodes ne me donnent pas le meilleur résultat. Alors, quelle est la meilleure façon de charger l'image externe de manière asynchrone? Je ne suis pas limité uniquement à utiliser jQuery, une solution ASP.NET pure est très bien.

Answer 1

Je ne suis pas sûr que la fonction .load() de jquery est conçue pour être utilisée sur les objets Image(). Vous pouvez le faire vous-même avec très peu de travail, cependant:

var img = new Image() 
img.onError = function(){ 
    //error handling here 
} 
img.onLoad = function(){ 
    //success 
    containerForImg.removeClass('loading-image').append($(img)); 
} 
img.onAbort = function(){ 
    //user clicked stop 
} 
img.src = "http://example.com" //loading begins NOW!