Javascript从服务器异步加载图像

Question

我想将图片从我的服务器加载到图片库。问题是，在加载网页后，我的程序首先加载所有图像，然后同时显示它们。因此，它们需要等待很长时间才能加载。

我想在加载时一次显示一张图片，在尚未加载的图片上显示“忙碌”指示符。

这是我的代码：

controller.labelForIndex = function (index) { 
    var arrayIndexNO=(index%(temp.length/2))*2;
    var appID=temp[arrayIndexNO];
    var iconImage=appID+".png";

    $(".ad-carousel-view .cells > li").css("background-image", "url("+iconImage+")");

    return temp[arrayIndexNO+1];
};

这个函数被调用了10次来加载10个png并显示在一个单元格中，但是我的代码先加载所有的图片，然后同时显示它们。

Answer 1

How to load images with jquery ajax? (From jQuery mailing list)：

您不能使用 AJAX 加载图像，只需创建一个新的图像对象并 附加，然后图像可以异步加载。试试这个简单的 jQuery 插件：

$.fn.image = function(src, f){
    return this.each(function(){ 
        var i = new Image();
        i.src = "">        i.>        this.appendChild(i);
    });
}

然后像这样调用这个插件：

$("#container").image(" http://jquery.com/images/hat2.gif",function(){
  alert("The image is loaded now");
});