JavaScript以異步加載圖像從服務器

我想從我的服務器加載圖像到圖像庫。問題是，在加載網頁後，我的程序首先加載所有圖像，然後同時顯示所有圖像。因此，他們需要等待加載。JavaScript以異步加載圖像從服務器

我想在加載時一次顯示一個圖像，在尚未加載的圖像上顯示「繁忙」指示符。

這是我的代碼：

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圖像和在細胞中顯示它們，但是我的代碼加載的所有圖像的第一和然後將它們顯示在同一時間。

來源

2010-07-22 Rony

你需要給你是如何將這些圖像到您的畫廊更多的細節。請張貼一些代碼。 – 2010-07-22 10:20:10

實際上，我將圖像添加到旋轉木馬視圖中....查看此行 $（「。ad-carousel-view .cells> li」）.css（「background-image」，「url（」+ iconImage +「）「）; 所以我的容器是「.ad-carousel-view .cells」li「我在那裏添加圖片.. – Rony 2010-07-22 10:49:08

你需要更多的細節.. ?? – Rony 2010-07-22 11:21:07

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

你不能用AJAX加載圖像只需創建一個新的圖像對象和追加，則圖像可以asyncronously加載。試試這個簡單的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"); 
});

來源

2010-07-22 10:18:21 Joni

嗨...我看到的代碼...但我不知道如何添加插件.... 我想在這裏添加圖像 $（「。ad-carousel-view .cells> li」）.css（「background-image」，「url（」+ iconImage +「）」）; ....然後如何調用插件？ – Rony 2010-07-22 10:45:25

我認爲你不能異步獲取背景圖像。您應該使用真實圖像。首先製作沒有src的圖像，然後用javascript加載這些圖像並更新所有的src屬性。 – Joni 2010-07-22 11:30:01

你可以給代碼PLZ？ – Rony 2010-07-22 12:05:48

JavaScript以異步加載圖像從服務器

回答

相關問題