加載Javascript圖像

我想在每次加載完成前載入的圖像時加載新圖像。函數create_photo_list正常工作。它會創建一組需要加載的照片。如果不需要加載，則數組爲空。問題是，當沒有更多的項目加載時，它會一直調用load_next_photo函數。加載Javascript圖像

我每次在函數中調用registerEventHandler的原因是因爲如果我不這樣做，下一張照片加載時不會調用該函數。

function registerEventHandler(node, event, handler) { 
    if (typeof node.addEventListener == "function") 
     node.addEventListener(event, handler, false); 
    else 
     node.attachEvent("on" + event, handler); 
} 

// Remove an HTML element event handler such as onclick 
// ex: unregisterEventHandler($("textfield"), "keypress", showEvent); 
function unregisterEventHandler(node, event, handler) { 
if (typeof node.removeEventListener == "function") 
    node.removeEventListener(event, handler, false); 
else 
    node.detachEvent("on" + event, handler); 
} 

function load_next_photo() { 
    var loading_list = create_photo_list(); 
    alert(loading_list.length); 
    if (loading_list.length > 0) { 
     img[loading_list[0]]['loaded'] = 1; 
     registerEventHandler($("load_img"), "onload", load_next_photo()); 
     $("load_img").src = img[loading_list[0]]['img']; 
    } 
    else { 
     alert("nothing"); 
     unregisterEventHandler($("load_img"), "onload", load_next_photo()) 
    } 
    unregisterEventHandler($("load_img"), "onload", load_next_photo()) 
}

來源

2011-03-20 SamB

只是好奇，爲什麼你不使用jQuery的所有事件偵聽代碼？ – JohnP 2011-03-20 05:35:05

我是一個業餘開發人員，我以前沒有聽說過;）但我真的更喜歡解決方法的答案。 – SamB 2011-03-20 05:41:34

不，不是，我的意思是所有'$（「load_img」）'調用。這看起來像jQuery（除非你有自己的框架設置）。 – JohnP 2011-03-20 05:51:46

不能讓我的身邊你目前擁有的頭，但這樣的代碼工作得很好：

var _images = ["image1.jpg", "image2.jpg", "image3.jpg"]; 
var _index = 0; 

window.onload = function() { 
    LoadImage(); 
}; 

function LoadImage() { 
    //stop condition: 
    if (_index >= _images.length) 
     return false; 

    var url = _images[_index]; 
    var img = new Image(); 
    img.src = url; 
    img.onload = function() { 
     _index++; 
     LoadImage(); 
    }; 

    document.getElementById("Container").appendChild(img); 
}

這將圖像（ID爲Container元素）逐一添加到容器，現場測試案例：http://jsfiddle.net/yahavbr/vkQQ7/

這是普通的JS，隨時問任何部分的詳細說明。 :)

來源

2011-03-20 11:16:41

帶警報的版本顯示它真的是一個接一個地加載：http：/ /jsfiddle.net/yahavbr/vkQQ7/1/ – 2011-03-20 11:18:50

所以它的工作原理，但我有一個名爲img的函數之外的數組。當我嘗試在函數中引用它時（例如alert（img [first_photo] ['img']）;）它給出一個未捕獲的類型錯誤：無法讀取未定義的屬性'3'。我知道數組存在。這會導致什麼？ – SamB 2011-03-20 17:08:17

@Sam try'alert（typeof img）;' - 你看到了什麼？如果「未定義」，則意味着由於某種原因，它在任何地方都不是**定義的。發佈相關代碼（編輯您的原始問題），我們將嘗試查看原因。當你這樣做時請發表評論，以便我得到通知。 – 2011-03-20 20:46:23

加載Javascript圖像

回答

相關問題