Javascript: Detect when a window is fully loaded

Question

I have a script which may be loaded at any stage of the life cycle of a web page. When the script is loaded it must run an initialize() method.

I want this function to be run on the "onload" event, but I cannot be certain that the page has not already loaded, i.e. that the "onload" has not been fired already.

Ideally my script would look like this:

var _initialize = function() { ...};

if(window.LOADED)
    _initialize();
else if (window.addEventListener)
    window.addEventListener('load', _initialize, false); 
else if (window.attachEvent)
    window.attachEvent('onload', _initialize);

Is there any such window.LOADED or document.LOADED variable or something similar?

Thanks in advance, Shane

Do you use any js framework ? jquery provides several great functions to do this easily — JMax, Jun 21 '11 at 10:52
Isn't the simplest answer to set a variable onload. When your script runs, if the variable isn't set, add an onload listener to call the script. If the variable is set, then just call the function. — RobG, Jun 21 '11 at 12:04

score 5 · Accepted Answer · answered Jun 21 '11 at 10:53

5

You can use jQuery to do this. $(document).ready(). Check this

Just call the function you want inside the ready. Then it'll be executed once the document is fully loaded

answered Jun 21 '11 at 10:53

Balanivash

6,257
9
29
48

I can't :(. The _initialize method loads the dependencies of the script, one of which is jQuery. – Shane Jun 21 '11 at 11:08
You can have jQuery alone outside of the function and load it along with the page. – Balanivash Jun 21 '11 at 11:10
Yes, but at the same time I can do this with all of my dependencies.What i am really trying to do is create a resource independent script. I suppose if all comes to all I can assume jQuery will be there but I want to avoid this – Shane Jun 21 '11 at 11:13
If you want to do the same without using jQuery then have a look at [this](http://stackoverflow.com/questions/799981/document-ready-equivalent-without-jquery) and [this](http://stackoverflow.com/questions/1795089/need-help-with-jquery-to-javascript/1795167#1795167) – Balanivash Jun 21 '11 at 11:13

score 1 · Answer 2 · answered Jun 21 '11 at 11:56

If you are not using any library you could make use of this

    function somelib(){
        this.readystate = false;    //tracks the state of DOM
        var nextcallfunc;       //stores the function to be called after DOM is loaded

    //called by checkReady function when DOM is loaded completely   
        this.ready = function(func){
          // quit if this function has already been called
          if (arguments.callee.done) return;
          // flag this function so we don't do the same thing twice
          arguments.callee.done = true;
          this.readystate=true;     //make DOM load permanent
          nextcallfunc.call();      //calls the onload handler
    }

    //Checks if the DOM has loaded or not
    this.checkReady= function(func){
        /* for Mozilla/Opera9 */
        nextcallfunc = func;

        if (document.addEventListener) {
          document.addEventListener("DOMContentLoaded", this.ready , false);
        }
        /* for Internet Explorer */
        /*@cc_on @*/
        /*@if (@_win32)
          document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
          var script = document.getElementById("__ie_onload");
          script.onreadystatechange = function() {
            if (this.readyState == "complete") {
              ready(func); // call the onload handler
            }
          };
        /*@end @*/

        /* for Safari */
        if (/WebKit/i.test(navigator.userAgent)) { // sniff
          var _timer = setInterval(function() {
            if (/loaded|complete/.test(document.readyState)) {
              this.ready(); // call the onload handler
            }
          }, 10);
        }

        /* for other browsers */
        window.onload = this.ready;
    }

    }

this also solves cross browser issues ..

Tyler Rick · Answer 3 · 2013-08-24T00:01:20.317

This is what I do (written in CoffeeScript):

$(window).on 'load', ->
  window._loaded = true

window.on_window_load_safe = (callback) ->
  if window._loaded
    # Since the load even already happened, if we tried to add a new callback now, it would not even
    # get called. So just call the callback immediately now.
    callback.call()
  else
    $(window).on 'load', ->
      callback.call()

You can test it with something like this:

  setTimeout(->
    on_window_load_safe ->
      console.debug 'on_window_load_safe called me'
  , 2000)

score -4 · Answer 4 · answered Jun 21 '11 at 11:00

-4

you can use

jQuery(document).ready();

at the end of the page or just before tag and it will call while your web page shows on client machine and approximately at the ending time of loading.....

answered Jun 21 '11 at 11:00

Gaurav Agrawal

4,152
9
38
59

Javascript: Detect when a window is fully loaded

4 Answers4

Linked