Javascript图像onload

Question

我每次加载以前加载的图像时都会尝试加载新图像.create_photo_list函数可以正常工作.它会创建一个需要加载的照片数组.如果不需要加载则数组为空.问题是,当没有更多项加载时,它会一直调用load_next_photo函数.

我每次在函数中调用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())
}

Answer 1

无法理解你现在拥有的东西,但这样的代码工作得很好:

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);
}

这将把图像Container逐个添加到容器(带ID的元素),实时测试用例:http://jsfiddle.net/yahavbr/vkQQ7/

这是简单的JS,随时可以询问有关任何部分的详细说明.:)