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，随时可以询问有关任何部分的详细说明。：）

Javascript图像onload

1 个答案: