dom - JavaScript image at onload event - Stack Overflow

admin管理员组

文章数量:1287648

I am trying to load a new image every time the previously loaded image has finished loading. The function create_photo_list works correctly. It creates an array of the photos that need to be loaded. If none need to be loaded then the array is empty. The problem is, when there are no more items to load the it keeps calling the load_next_photo function.

The reason I call the registerEventHandler every time in the function is because if I don't, the function is not called when the next photo loads.

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

I am trying to load a new image every time the previously loaded image has finished loading. The function create_photo_list works correctly. It creates an array of the photos that need to be loaded. If none need to be loaded then the array is empty. The problem is, when there are no more items to load the it keeps calling the load_next_photo function.

The reason I call the registerEventHandler every time in the function is because if I don't, the function is not called when the next photo loads.

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

• javascript
• dom
• dom-events

Share Improve this question Follow edited Jul 27, 2022 at 15:29 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Mar 20, 2011 at 5:33 SamBSamB 3,29344 gold badges3838 silver badges4141 bronze badges 4

• Just curious, why aren't you using jquery for all your event listening code? – JohnP Commented Mar 20, 2011 at 5:35
• I'm an amateur developer and I haven't heard of it before ;) I would really prefer an answer to a workaround though. – SamB Commented Mar 20, 2011 at 5:41
• no no, I meant all the $("load_img") calls. That looks like jquery (unless you have your own framework setup). – JohnP Commented Mar 20, 2011 at 5:51
• I would remove the () from load_next_photo here: ..registerEventHandler($("load_img"), "onload", load_next_photo()); – mplungjan Commented Mar 20, 2011 at 7:10

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

Can't get my head around what you currently have, but such code works just fine:

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

This will add the images to the container (element with ID Container) one by one, live test case: http://jsfiddle/yahavbr/vkQQ7/

This is plain JS, feel free to ask about any part for elaboration. :)

本文标签： domJavaScript image at onload eventStack Overflow