用jQuery异步加载映像

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (79)

我希望使用jQuery异步地在我的页面上加载外部图像。我试过以下几点:

$.ajax({ 
   url: "http://somedomain.com/image.jpg", 
   timeout:5000,
   success: function() {

   },
   error: function(r,x) {

   }
});

但是它总是会返回错误,是否可以像这样加载图像?

我试着用.load方法,但我不知道如何在图像不可用时设置超时(404)。我该怎么做?

提问于
用户回答回答于

不需要Ajax。能可以创建一个新的图像元素,设置它的源属性,并在它完成加载后将它放在文档的某个地方:

var img = $("<img />").attr('src', 'http://somedomain.com/image.jpg')
    .on('load', function() {
        if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
            alert('broken image!');
        } else {
            $("#something").append(img);
        }
    });
用户回答回答于

解决方案1

使用base 64图像数据和REST映像服务。如果你有自己的webservice,可以添加一个JSP/PHPREST脚本,该脚本提供base 64编码的图像。我偶然发现了一种很酷的图像编码新语法:

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

因此,你可以使用Ajax加载ImageBase 64数据,然后在完成后将base 64数据字符串构建到映像中!

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

解决方案2:

欺骗浏览器使用它的缓存。当资源在浏览器缓存中时,这给你提供了一个很好的fadeIn():

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

然而,这两种方法都有其缺点:第一种方法只在现代浏览器上工作。第二种方法存在性能故障,并依赖于如何使用缓存的假设。

扫码关注云+社区

领取腾讯云代金券