jJavascript window.onload事件的正确用法

问题描述 投票:4回答:4

我的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 "来删除范围,但没有起到作用。

javascript dom-events onload
4个回答
3
投票

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

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


0
投票

如果你能使用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.

0
投票

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

MDN - window.onload

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


0
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.