javascript window.onload event correct usage

问题

I have this loop code to reduce the DOM calls in my javascript, and reuse them.

aarr = [];

for (var z=1; z<=10; z++) {
    c = z-1;
    aarr[c] = document.getElementById("a"+z); 
}

I have been shown that if the code is ran before the DOM is complete, then the array is null. Moving the script after the last html code will work.

So now I want to put this code inside the window.onload event so to not have to move the script code to the bottom of the page. But it apparently does not work because it appears that the array loop is executed before the DOM is completed.

window.onload=function(){

    var aarr = [];
    for (var z=1; z<=10; z++) {
        c = z-1;
        aarr[c] = document.getElementById("a"+z);
    }
}

Also, I have tried to remove the "var" to remove scope without making a difference.

回答1:

You could also try this approach without using a framework:

window.onload = (function(){
    return function(){
        var aarr = [];
        for (var z=1; z<=10; z++) {
            aarr.push(document.getElementById("a"+z));
               alert(aarr[z-1].id);
        }
     };
})();

JSFiddle

回答2:

If you can use jquery, then you can use the document ready listener:

$(document).ready(function() {

  var aarr = [];
  for (var z=1; z<=10; z++) {
    c = z-1;
    aarr[c] = document.getElementById("a"+z);

 }

});

http://www.jquery.com

as per the comment above, have you tried:

if (document.readyState === "complete") { init(); } // call whatever function u want.

回答3:

The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images and sub-frames have finished loading.

MDN - window.onload

I guess you try calling code outside of onload. See this fiddle

回答4:

Better to use a function without pre-scanning the dom to create a cache, Pre-scanning is not needed when you use a simple function with a cache construction. With jQuery you can can create a function like this (native javascript method below this):

window.__jcache = {};

  window.$jc = function(u) // jQuery cache
  {
   if( u == undefined )
    { return window.jQuery; }
   if( typeof u == 'object' || typeof u == 'function' )
    { return window.jQuery(u); }
   if( window.__jcache[u] == undefined )
    { window.__jcache[u] = window.jQuery(u); }

   return window.__jcache[u]; 
  };

Or without a framework (native javascript):

window.__domcache = {};

  window.getObj = function(u) // jQuery cache
  {
   if( u == undefined )
    { return null; }
   if( typeof u == 'object' || typeof u == 'function' )
    { return u; }
   if( window.__domcache[u] == undefined )
    { window.__domcache[u] = document.getElementById(u); }

   return window.__domcache[u]; 
  };

So you can do:

var o = $jc('a1'); // for jquery version

var o = getObj('a1'); // The native javascript method (jamex)

That does the trick.

Greetz, Erwin Haantjes

来源：https://stackoverflow.com/questions/7326952/javascript-window-onload-event-correct-usage

标签

javascript

javascript-events

onload