javascript window.onload 事件正确使用

javascript window.onload event correct usage

提问by Jamex

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

我有这个循环代码来减少我的 javascript 中的 DOM 调用，并重用它们。

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.

我已经看到，如果代码在 DOM 完成之前运行，则数组为空。在最后一个 html 代码之后移动脚本将起作用。

So now I want to put this code inside the window.onloadevent 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事件中，这样就不必将脚本代码移动到页面底部。但它显然不起作用，因为它似乎在 DOM 完成之前执行了数组循环。

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.

另外，我试图删除“var”以删除范围而没有任何区别。

采纳答案by Richard A

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

JSFiddle

回答by Codebeat

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):

最好使用不预先扫描 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]; 
  };

Or without a framework (native javascript):

或者没有框架（原生 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

格雷茨，埃尔文·汉杰斯

回答by Saxoier

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.

load 事件在文档加载过程结束时触发。至此，文档中的所有对象都在DOM中，所有的图片和子框架都已经加载完毕。

MDN - window.onload

MDN - window.onload

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

我猜您尝试在 onload 之外调用代码。看到这个小提琴

回答by SublymeRick

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

如果您可以使用 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

http://www.jquery.com

as per the comment above, have you tried:

根据上面的评论，您是否尝试过：

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