javascript：等待代碼中使用的圖像加載

我有一個問題，我無法修復在javascript中創建圖像輪播。我使用的jCarousel有幾個「哈克」的修改，以允許具有不同寬度（縱向/橫向）最終的結果是我使用一些代碼，看起來像這樣javascript：等待代碼中使用的圖像加載

function mycarousel_itemAddCallback(carousel, first, last, dir) 
{ 
    var thumbdir = 'gallery/' + dir + '/thumbs/' //set the thumbs dir 
    var fulldir = 'gallery/' + dir + '/full/' //set the full images dir 
    for (i = 0; i < 21; i++) { 
     var no = i+1; //number image we are on 
     var img = new Image(); //make a new image 
     img.src = thumbdir + no + '.jpg'; //set its source 
     var fullimg = fulldir + no + '.jpg'; //set full omages source as well 
     var html = mycarousel_getItemHTML(img.src, fullimg, img.width); //make some html for the image, with width 
     carousel.add(i+1, html, img.width); //add the image to the carousel, with width passed in 
     tagID = 'jcarousel-item-' + no; //get the css tag of the image just added 
     changeStyle(tagID, img.width); // force its height in inline css to prevent bugs 
    }

現在基本圖像，這個問題似乎是因爲圖像尚未加載，「img.width」最終爲0。這意味着圖庫中的所有圖像的寬度都爲0，因此不可見。刷新頁面（因此所有的圖像都在緩存中），一切正常，「img.width」是正確的值。

設置圖像加載警報後強制暫停允許img.width成爲正確的值，但顯然這是一個可怕的解決方法。任何人都可以提供一種允許JavaScript加載圖像，並獲得其大小正確的方式，然後繼續腳本？

預先感謝所有幫助

來源

2010-08-11 Michael Lawson

你需要使用閉包變量傳遞到功能：

function foo(x,y) 
{ 
    //do stuff 
} 


for(var i = 0 ; i < 9 ; i++) 
{  
    var img = new Image(); 
    img.onload = (function(a,b){ return function(){ foo(a,b) }; })(i,someVar); 
    img.src = "bar.jpg"; 
}

的嵌套函數工作如下所示：外部函數在圓括號中，因爲我們聲明然後一次調用它，所以（i，someVar）作爲（a，b）傳入函數。這個函數又將一個指針返回給一個不接受任何參數的新的第二個函數。 Wihtin第二個函數是一行代碼，它調用foo，並且（a，b）在調用時被設置爲i和someVar的當前值。當foo最終實際被調用（通過onload）時，它的x和y參數就是我和someVar。

實際上沒有人理解任何的這一點，我們只是假裝我們做:-)

您可以包裝奇特的嵌套函數在其他輔助功能，使之少一點古怪。請參閱http://cyclomedia.co.uk/?Javascript_Function_Pointer_Functions以瞭解我的看法，

來源

2010-08-11 22:07:42

感謝您的解釋，我想我找到基納得到它足夠！ – 2010-08-12 05:57:48

使用onload事件是這樣的：

var img = new Image(); 
img.onload = function(){ 
    // image has been loaded 
}; 

// proper way to assign any src right now 
img.src = 'path there'; 

alert(img.width);

來源

2010-08-11 20:37:10 Sarfraz

非常感謝您的快速回答！將img.onload去之前源設置爲你已經完成？會不會導致它等到「空白」圖像加載，而不是在img.src中設置的那個？ – 2010-08-11 20:53:21

可能是一個愚蠢的問題，但你能否以正常的方式將變量傳入onload函數？因爲我需要代碼中的一些變量需要在onload函數中 – 2010-08-11 21:06:56

@Michael Lawson：是的，你可以在onload函數體塊中使用一個變量，在加載後使用src是一個好習慣。 – Sarfraz 2010-08-11 23:50:08

javascript：等待代碼中使用的圖像加載

回答

相關問題