Im messing around with the .onload event handler for images, and am finding the results to be a little confusing??

I have the following script to change the display properties for some images:

function showImage ()
    {
        this.style.display = 'none';
        alert (this.nodeName);
    }

function loading ()
    {
        var portThumbImg = document.getElementById ('portThumbAll').getElementsByTagName ('img');
        
        for (i = 0; i < portThumbImg.length; i ++)
            {
                portThumbImg[i].onload = showImage;
            }
        
        
        var content = document.getElementById ('content');
    }

    
loading ();

Im testing it locally, which I think might be causing the problem, as the results seem to be different each time I run the script! Its supposed to hide all of the images each when they are loaded.

sometimes it will hide all of them, and sometimes it will just hide a few! The images are inside a div, and Ive placed the script tag just before the </div>

Im guessing that since Im testing it locally its something to do with the images already being loaded? Or loading too fast or something? I don't know.

But I would have thought that even if the images have been loaded before, you could still use the .onload event reliably each time you refreshed the page?

If the div hasn't closed it won't exist in the DOM

define the functions early, but don't call the loading function until the div has been closed.

Now I get ya! Thanks.