javascript window.onload 이벤트 올바른 사용

Question

내 루프에서 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"를 제거하려고했습니다. 당신이 jQuery를 사용할 수있는 경우, 문서 준비 리스너 사용할 수 있습니다

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

: 위의 의견에 따라

$(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을 사전 검사가 필요하지 않고 기능을 사용할 수 있습니다.

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]; 
    }; 

또는 프레임 워크없이

(기본 자바 스크립트) :

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) 

jQuery를 사용하면이 (이 아래 네이티브 자바 스크립트 방법) 같은 함수를 만들 수 있습니다

그 트릭을 않습니다. 문서로드 프로세스의 끝에

는 Greetz, 어윈 Haantjes

Answer 4

로드 이벤트가 발생합니다. 이 시점에서 문서의 모든 객체가 DOM에 있고 모든 이미지와 하위 프레임의로드가 완료되었습니다.

MDN - window.onload

나는 당신이 온로드의 외부의 코드를 호출하려고 생각한다. See this fiddle