Загрузка изображения 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);
}

Это добавит изображения в контейнер (элемент с идентификатором Container) один за другим, живой тестовый пример: http://jsfiddle.net/yahavbr/vkQQ7/

Это простой JS, не стесняйтесь спрашивать о любой части для уточнения. :)