Javascript: detect when a window is fully loaded

Question

I have a script that can be loaded at any stage of the life cycle of a web page. When the script loads, it should run the initialize () method.

I want this function to fire in the "onload" event, but I cannot be sure that the page is not loaded yet, i.e. that "onload" was no longer running.

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 such a window .LOADED or document.LOADED or something like that?

Thanks in advance, Shane

Answer 1

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

Just call the desired function inside the finished one. Then it will be executed after the document is fully loaded.

Answer 2

If you are not using any library, you can use 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; } } 

it also solves cross browser issues.

Answer 3

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 check it something like this:

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

Answer 4

you can use

 jQuery(document).ready(); 

at the end of the page or immediately before the tag, and it will invoke while your web page is displayed on the client machine and around the time the download is finished .....