2010-01-18 65 views
0

我一直試圖讓這個工作,並沒有100%的成功,基本上試圖加載圖像,如果源不存在嘗試第二個圖像,直到它達到默認值。Javascript檢查圖像加載源

我一直在嘗試基於this question的解決方案,但是我沒有使用jQuery,因此接受的解決方案對我來說沒有用,所以嘗試使用第二種解決方案,該解決方案几乎可行,但似乎不是(如果這是有道理的?)。我可以讓它測試我們需要的第二個圖像,但是它似乎沒有再次觸發onload事件。

function topTenImages(){ 
var topTenDiv = document.getElementById('toptenimg'); 
var topTenImg = new Image(); 
var ac = "tryout"; 
var imageOrder = new Array(
    "/images/codespec/banners/"+ac+"_topten.gif", 
    "/images/codespec/banners/"+ac+"_topten.jpg", 
    "/images/banners/default_topten.png", 
    "/images/banners/default_topten.jpg" 
); 
var errorCnt = 0; 
topTenImg.src = domainResources+imageOrder[errorCnt]; 
topTenImg.onLoad = new function(){ 
    if(!checkImage(topTenImg)){ 
    if(errorCnt < imageOrder.length){ 
    var io = imageOrder[++errorCnt]; 
    topTenImg.src = domainResources+io; 
    } 
    } 
} 
topTenDiv.appendChild(topTenImg); 
} 

是的,我知道,我們可以做的PHP/Perl的/等本服務器端,但我們正試圖限制我們的輸出頭,所以這似乎是做的最好的方式。 (歡迎替代品)。我的另一個想法是將它封裝在數組的for循環中,並且每次創建一個新對象。但這似乎更有意義。

感謝, 精神科

+0

有點OT:從'new function'中刪除'new'。你只能在'Function'(注意大寫)*構造函數*中使用'new',這在這裏很少使用,也不適用。你不要在'function'聲明中使用它。 – 2010-01-18 14:38:16

+0

謝謝,我總是感到困惑與什麼時候和不使用新的:) – Psytronic 2010-01-18 15:56:32

回答

2

這應該回答你的問題: http://www.thefutureoftheweb.com/blog/image-onload-isnt-being-called 你只需要首先設置的onLoad。希望這會起作用:

topTenImg.onLoad = function(){ 
    if(!checkImage(topTenImg)){ 
    if(errorCnt < imageOrder.length){ 
    var io = imageOrder[++errorCnt]; 
    topTenImg.src = domainResources+io; 
    } 
    } 
} 
topTenImg.src = domainResources+imageOrder[errorCnt]; 
+0

+1就是這樣,你需要在設置src之前設置onload。但是,我仍然對onload有一種不信任的態度,因爲我認爲我曾經有過它仍然沒有開火的例子。但不知道。 – 2010-01-18 14:39:49