JavaScript window.onload事件的正确使用方法

Question

我有这样一个循环代码，用于减少我的Javascript中的DOM调用，并重复使用它们。

aarr = [];

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

我了解到，如果在文档对象模型（DOM）完全加载之前运行代码，则该数组将为 null。将脚本移到最后一个 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”以消除作用域，但并没有产生任何影响。

- Jamex

---

请阅读以下内容：https://dev59.com/nnNA5IYBdhLWcg3wZ85S。 - Mihai Iorga

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

- Richard A

---

嘿，Jamex。我对你的循环做了一些更改，现在它对我来说运行良好。看看我添加的fiddle :) - Richard A

@Richard Aikoroje：下次分叉fiddle。另外：(function(){})();是无用的。你唯一实现的是扩展[[scope]]。 - Saxoier

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.

- Rick Kukiela

---

谢谢Rick，我没有使用jQuery，所以这对我不起作用。 - Jamex

谢谢，我之前已经阅读了那篇文章，并且使用那段代码成功地在Firefox上运行了。不过，遗憾的是，IE版本一直给我报错。我正在逐行检查脚本。 - Jamex

Answer 3

最好使用一个不需要预先扫描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)

搞定了。

问候，Erwin Haantjes

- Codebeat

---

谢谢Erwin，这些是jQuery代码吗？我不知道/没有jQuery。 - Jamex

第二个代码是非jQuery版本，getObj函数。 - Codebeat

在“或者不使用框架（原生JavaScript）：”下面的部分是您的。

---

Or without a framework (native javascript): - Codebeat

Answer 4

“load”事件在文档加载过程的末尾触发。此时，文档中的所有对象都在DOM中，并且所有图像和子框架都已完成加载。 MDN - window.onload 我猜你试图在onload之外调用代码。看看这个fiddle。

- Saxoier