jJavascript window.onload事件的正确用法

Question

我的Javascript里有这样的循环代码，以减少DOM的调用，并重复使用。

aarr = [];

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

我已经被证明，如果代码在DOM完成之前运行，那么数组是空的。 把脚本移到最后一段html代码之后就可以了。

所以，现在我想把这段代码放在 window.onload 事件，这样就不用把脚本代码移到页面底部了。 但这显然是行不通的，因为似乎在DOM完成之前，数组循环就被执行了。

window.onload=function(){

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

另外，我也试过去掉 "var "来删除范围，但没有起到作用。

Answer 1

你也可以在不使用框架的情况下尝试这种方法。

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

Answer 2

如果你能使用jquery，那么你可以使用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

按照上面的评论，你有没有试过。

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

Answer 3

加载事件是在文档加载过程结束时发生的。此时，文档中的所有对象都在DOM中，所有的图像和子帧都已经完成加载。

MDN - window.onload

我猜你尝试在onload之外调用代码。请看这段文字

Answer 4

最好使用一个不预先扫描dom的函数来创建缓存，当你使用一个简单的函数与缓存构造时，不需要预先扫描。使用jQuery，你可以可以创建一个这样的函数（下面的native javascript方法）。

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]; 
  };

或者不用框架（本地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]; 
  };

所以你可以这样做。

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

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

这样就可以了。

Greetz, Erwin Haantjes