使用 jQuery 异步加载外部图像

Question

我遇到以下情况：

我需要加载由第 3 方托管的多个外部图像，示例网址如下；

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

然而，加载 1 张图像可能需要长达 15 秒的时间！ （我知道这很疯狂），所以我想使用 jQuery 异步加载这些图像。这就是我陷入困境的地方，我尝试了以下两种方法：

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

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

我认为上面的代码不会异步加载图像，因为请求在完成之前一直等待所有图像。

第二种方法：

我创建了一个通用处理程序 (.ASHX)，用于使用 .NET 中的 WebRequest 和 WebResponse 类下载图像，并使用 $.ajax()< 调用此处理程序/code> jQuery 方法，但是如果有大量图像，这会导致屏幕无响应。我可以确认对处理程序的请求是异步的，但是我很好奇处理程序内部的调用是否是异步的。

结论是，这两种方法都没有给我最好的结果。那么，异步加载外部图像的最佳方法是什么？我不仅限于使用 jQuery，纯 ASP.NET 解决方案就可以了。

Answer 1

我不确定 jquery 的 .load() 函数是否设计用于 Image() 对象。不过，您可以自己完成，只需很少的工作：

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!