SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict
    Join Date
    Jun 2006
    Location
    Durban, South Africa
    Posts
    287
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to figure out if the page is loaded...

    Hi all

    I was wondering if there was a way to figure out if a page has loaded, in javascript?

    Reason being, I have a function that adds an onload event to the window, which then calls another function, but if the page has already loaded, that event will never fire, and thus the second function wont be run.

    Does anyone know how to do this?

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ? In what situation can you see the onload event not firing when the page loads?

    Can you go into more detail as to why your asking this question? If you explain what is happening, we may be able to help.


  3. #3
    SitePoint Addict
    Join Date
    Jun 2006
    Location
    Durban, South Africa
    Posts
    287
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi.

    Ok here goes.

    I created a javascript class, that creates a photo gallery.
    To add a photo gallery to my page, I call an attach function, which does the first bit of basic setup, and adds an event to the window to call the init function when the window has loaded.

    This all works well and good

    I then created another javascript class, which wraps the photo gallery class, which is pretty much a custom photo gallery class (customin that its custom to the site im working on). I then also created a php class, to get all the images I want displayed. Once I have all the images (in php) I need to add them all to the javascript class, so I add markers in the images, like so

    Code:
    <div id="photo_gallery:gal_containerimage_path:/images/pic.jpg"></div>
    The reason I do it this way is to avoid, adding javascript anywhere in the code, so I handle it in the wrapper js class (explained below)
    The wrapper js class that I created, runs on page load and gets all div tags, cycles through, looking for an id that starts with "photo_gallery:". If it find that marker, it knows that this div will be a photo gallery, so it look for other markers (image_path: etc..), and can then call the photo_gallery class, but if I call the attach method from the first class, it will never call the init function because the page has already loaded...

    So my aim is to figure out in the attach function in the photo gallery class, if the window has loaded or not. If loaded, just call the init function, if not loaded add init function to the window load.

    Make sense?

  4. #4
    SitePoint Addict
    Join Date
    Jun 2006
    Location
    Durban, South Africa
    Posts
    287
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In IE there is a document.readyState property which is "loading" when the page is loading, and "complete" when the page is complete. This work in IE only unfortunately, is there something similar in FF?
    Or are there any other solutions?

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    It seems that you shouldn't use the onload attribute to run the code.
    Instead, you could setup a method that gets called regularly by timeout event that checks if the page is loaded, and if so runs the desired function.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Addict
    Join Date
    Jun 2006
    Location
    Durban, South Africa
    Posts
    287
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by pmw57

    Instead, you could setup a method that gets called regularly by timeout event that checks if the page is loaded, and if so runs the desired function.
    Same problem though, how do you know if the page has loaded...

  7. #7
    SitePoint Addict
    Join Date
    Jun 2006
    Location
    Durban, South Africa
    Posts
    287
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The solution that iv eventually gone with, is just to pass a variable to the attach function, to say weather the page has loaded or not.
    If you know you going to call it after page load, just pass in true, else its false.
    This is the least dynamic solution but at least it works.
    I still cant believe that there is no DOM property to tell weather the page has loaded or not, well not in FF... and believe me I looked.

    Thanks to all who tried to help

  8. #8
    SitePoint Zealot zealus's Avatar
    Join Date
    Jan 2004
    Location
    NY
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As a workaround (I know, sound stupid...): use the last element on the page to see if it has been created?

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Place a script at the end of the body and it will run as soon as the DOM is ready.

    Attach a method to the window.onload event and you will then know when the page has fully loaded.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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