1

I have the following situation:

I need to load several external images hosted by 3rd party, with example url like this;

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

however loading 1 image can cost up to 15 secs!! (crazy I know), so I'm thinking to load these images asynchronously using jQuery. Here's where I'm stuck, I have tried the following 2 methods:

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

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

Which I think the code above will not load the image asynchronously because the request keeps waiting for all the images before it gets complete.

The second method is:

I created a generic handler (.ASHX) to download the image using WebRequest and WebResponse class from .NET and the call this handler with $.ajax() jQuery method, but this result in the screen being unresponsive if there are a lot of image. I can confirm that the request to the handler is asynchronous, however I'm curious as whether the call inside the handler is asynchronous or not.

The conclusion is, both methods don't give me the best result. So, what is the best way to load external image asynchronously? I'm not limited only to use jQuery, a pure ASP.NET solution is fine.

BenMorel
  • 34,448
  • 50
  • 182
  • 322
Arief
  • 6,055
  • 7
  • 37
  • 41

1 Answers1

0

I'm not sure that jquery's .load() function is designed to be used on Image() objects. You can do it yourself with very little work, however:

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!
jordancpaul
  • 2,954
  • 1
  • 18
  • 27