javascript - 使用 jQuery 异步加载图像

Question

我想使用 jQuery 在我的页面上异步加载外部图像，我尝试了以下方法:

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

   },
   error: function(r,x) {

   }
});

但它总是返回错误，甚至可以像这样加载图像吗？

我尝试使用 .load方法并且它有效，但我不知道如果图像不可用(404)如何设置超时。我该怎么做？

Answer 1

不需要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);
        }
    });