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(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，您可以创建这样的函数（下面是本机 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)

就可以了。

欧文·汉杰斯·格雷茨