Javascript图像加载

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

这会将图像一个一个添加到容器（ID为Container的元素），现场测试用例：http://jsfiddle.net/yahavbr/vkQQ7/

这是纯 JS，请随时询问任何部分以进行详细说明。 :)