Detect when document is completly loaded (even images)

[pbrosset]

Hi all,

I'm building a rather large application using the borderLayout object in YUI-ext.
I have added many objects to the already quite numerous YUI and YUI-ext libraries and those objects need to load when the document is ready.
This is really simple using YUI-ext event manager. OK, no problem so far.

The thing is, it takes some time for my objects to load, and during this time, especially under IE, my application is not in a state in which I'd like users to interact with. Under IE, the whole page is blank anyway, not so good!

So I had the idea of creating a splash screen to hide the application while the loading is ongoing.
This is ok, I just put a DIV, absolute positioned, over everything so you can't see the application itself. Then, at the end of my init() method, which correspond to when everything should be ready, I just kill the splash screen DIV.

Although this is working and correct, it doesn't really correspond to what I expected, when the splash screen disappears (which is like almost instantly under Firefox given it's speed when executing JS code), the whole page hasn't really finished loading. All media files are not here yet, I'm talking about images here. And this leads to my real question here: How do you know when images are displayed on a webpage? Can you listen to an event that fires when each and every image is finished loading ?

My idea would be to get the last image in the document with something like :

document.images[document.images.length - 1]
And then listen to its readyState somehow...

I've looked for info on the web about this, but I wasn't convinced with the image.complete property as it didn't appear to work the same under every browser (maybe I'm missing something here). I also read somewhere that the property readyState was available on images but I'm not too sure about this one.
The best really would be to have an event handler like the following:


YAHOO.ext.EventManager.addListener(myImg, "onLoadingComplete", myCallbackFn);

Is this possible you think? Or if any of you guys have any idea on how to track the "real" end of page loading, that'd be great!

Thanks to everyone.
Patrick

[pbrosset]

Just a precision here: If I'm talking about images it's because they are, at least in my case, the files that take the longest to load. I probably have something like 50 images to load, and I don't like seeing my application on screen without seeing the images at the same time.
In particular, all tabs in the layout regions don't have their background-images for a short time, and that's exactly what I'm trying to avoid.
Thanks again

[jack.slocum]

The load event of the window element doesn't fire until everything (including images) are loaded. What you could do is use YAHOO.ext.EventManager.onDocumentReady to initialize your components and YAHOO.util.Event.on(window, 'load', ....); to hide the splash screen. I don't see why this wouldn't work.