使用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);
        }
    });

Answer 2

如果你真的需要使用AJAX ......

我遇到的是使用过的处理器并不是正确的选择.在我的情况下通过JavaScript打印.因此,实际上有两个选项可以使用AJAX样式:

解决方案1

使用Base64图像数据和REST图像服务.如果您有自己的Web服务,则可以添加以Base64编码提供图像的JSP/PHP REST脚本.现在这有用吗？我遇到了一种很酷的图像编码新语法:

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

因此,您可以使用Ajax加载Image Base64数据,然后在完成时将Base64数据字符串构建到映像!非常有趣 :).我建议使用此站点http://www.freeformatter.com/base64-encoder.html进行图像编码.

$.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();
});   

但是,这两种方法都有其缺点:第一种方法仅适用于现代浏览器.第二个有性能故障,并依赖于如何使用缓存的假设.

欢呼,意志

Answer 3

使用jQuery,您可以简单地将"src"属性更改为"data-src".图像将无法加载.但该位置与标签一起存储.我喜欢哪个.

<img class="loadlater" data-src="path/to/image.ext"/>

一个简单的jQuery将data-src复制到src,它将在您需要时开始加载图像.在我的情况下,页面已完成加载.

$(document).ready(function(){
    $(".loadlater").each(function(index, element){
        $(element).attr("src", $(element).attr("data-src"));
    });
});

我敢打赌jQuery代码可以缩写,但这种方式是可以理解的.

Answer 4

$(<img />).attr('src','http://somedomain.com/image.jpg');

应该比ajax更好,因为如果它是一个图库并且你循环遍历图片列表,如果图像已经在缓存中,它将不会向服务器发送另一个请求.它将在jQuery/ajax的情况下请求并返回HTTP 304(未修改),然后使用来自缓存的原始图像(如果已经存在).上述方法在库中的第一个图像循环之后减少了对服务器的空请求.

Answer 5

您可以使用延迟对象进行异步加载。

function load_img_async(source) {
    return $.Deferred (function (task) {
        var image = new Image();
        image.onload = function () {task.resolve(image);}
        image.onerror = function () {task.reject();}
        image.src=source;
    }).promise();
}

$.when(load_img_async(IMAGE_URL)).done(function (image) {
    $(#id).empty().append(image);
});

请注意：image.onload 必须位于 image.src 之前，以防止缓存出现问题。