Results 1 to 3 of 3

Thread: Detect when document is completly loaded (even images)

  1. #1

    Default Detect when document is completly loaded (even images)

    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.

  2. #2


    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

  3. #3
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    New York, NY


    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.

Similar Threads

  1. Detecting when all images are loaded...?
    By hcristea in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 20 Jan 2011, 3:44 PM
  2. Detect collapse state
    By heidtmare in forum Ext 1.x: Help & Discussion
    Replies: 5
    Last Post: 19 Sep 2007, 6:33 PM
  3. Could you completly load a tree once?
    By gizzmo in forum Ext 1.x: Help & Discussion
    Replies: 20
    Last Post: 13 Apr 2007, 5:36 AM
  4. Detect moment data grid is complete loaded
    By fnan11 in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 10 Mar 2007, 12:09 PM
  5. 1) Edit and Select with EditorGrid. 2) Detect sorts in serve
    By galdaka in forum Ext 1.x: Help & Discussion
    Replies: 3
    Last Post: 17 Oct 2006, 7:14 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts