Правильное использование события javascript window.onload

Question

У меня есть этот код цикла, чтобы уменьшить вызовы DOM в моем JavaScript и использовать их повторно.

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

Событие загрузки происходит в конце процесса загрузки документа. На этом этапе все объекты в документе находятся в DOM, и все изображения и подкадры завершили загрузку.

MDN - window.onload

Полагаю, вы пытаетесь вызвать код вне загрузки. Смотри эту скрипку

Answer 3

Лучше использовать функцию без предварительного сканирования домена для создания кэша. Предварительное сканирование не требуется, если вы используете простую функцию с построением кэша.С помощью 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)

Вот и все.

Привет, Эрвин Хаантес

Answer 4

Если вы можете использовать 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.