Question

我有以下情况：

我需要加载由第三方托管的几个外部图像，例如这样的url;

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() 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!

使用jQuery异步加载外部映像

1 个答案: