Javascript: Detect when a window is fully loaded

问题

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

回答1:

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

回答2:

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 ..

回答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 test it with something like this:

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

回答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.....

来源：https://stackoverflow.com/questions/6424064/javascript-detect-when-a-window-is-fully-loaded

标签

javascript

events

load