[javascript] window.onload 대 document.onload

JAVASCRIPT / 글쓴이

어느 것이 더 널리 지원 됩니까 : window.onload또는 document.onload?

답변

그들은 언제 발사합니까?

window.onload

  • 기본적으로 콘텐츠 (이미지, CSS, 스크립트 등)를 포함 하여 전체 페이지가로드되면 시작 됩니다.

일부 브라우저에서는 이제 document.onloadDOM이 준비되면 역할을 담당 하고 실행됩니다.

document.onload

  • 이미지 및 기타 외부 컨텐츠가로드 되기 전에 DOM이 준비 될 때 호출됩니다 .

그들은 얼마나 잘 지원됩니까?

window.onload가장 널리 지원되는 것으로 보입니다. 실제로 가장 최신 브라우저 중 일부는로 대체 document.onload되었습니다 window.onload.

브라우저 지원 문제는 많은 사람들이 jQuery 와 같은 라이브러리를 사용 하여 준비중인 문서의 검사를 처리 하기 시작한 이유 일 가능성이 높습니다 .

$(document).ready(function() { /* code here */ });
$(function() { /* code here */ });

역사를 위해. window.onloadvs body.onload:

over 의 사용법과 관련하여 코딩 포럼 에 대해서도 비슷한 질문이 제기되었습니다 . 결과는 구조와 동작을 분리하는 것이 좋기 때문에 사용해야 합니다.window.onloadbody.onloadwindow.onload

답변

일반적인 생각은 즉 위해 window.onload 화재 문서의 윈도우 인 경우 프리젠 테이션 준비 및 document.onload 화재 때 DOM 트리 (문서 내에서 마크 업 코드에서 내장이)되어 완료 .

DOM- 트리 이벤트를 구독하면 CPU로드가 거의 발생 하지 않고 Javascript를 통해 오프 스크린 조작이 가능합니다 . 반대로 여러 외부 리소스를 아직 요청, 파싱 및로드하지 않은 경우 실행 하는 데 시간이 걸릴window.onload 수 있습니다 .

► 테스트 시나리오 :

차이점과 선택한 브라우저 가 위에서 언급 한 이벤트 핸들러를 구현 하는 방법 을 관찰하려면 문서의 태그 안에 다음 코드를 삽입하십시오 .<body>

<script language="javascript">
window.tdiff = []; fred = function(a,b){return a-b;};
window.document.onload = function(e){
    console.log("document.onload", e, Date.now() ,window.tdiff,
    (window.tdiff[0] = Date.now()) && window.tdiff.reduce(fred) );
}
window.onload = function(e){
    console.log("window.onload", e, Date.now() ,window.tdiff,
    (window.tdiff[1] = Date.now()) && window.tdiff.reduce(fred) );
}
</script>

► 결과 :

다음은 Chrome v20 (및 아마도 최신 브라우저)에서 볼 수있는 동작입니다.

  • document.onload이벤트가 없습니다 .
  • onload내부에서 <body>선언되면 <head>(이벤트가 다음과 같이 작동하는 경우)document.onload .
  • 카운터 상태에 따라 카운팅 및 동작을 수행하면 두 이벤트 동작을 모두 에뮬레이션 할 수 있습니다.
  • 또는 window.onloadHTML <head>요소 의 범위 내 에서 이벤트 핸들러를 선언하십시오 .

► 예제 프로젝트 :

위의 코드는 이 프로젝트의 코드베이스 ( index.html및 keyboarder.js) 에서 가져 왔습니다 .

window 객체 의 이벤트 핸들러 목록은 MDN 설명서를 참조하십시오.

답변

이벤트 리스너 추가

<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function(event) {
      // - Code to execute when all DOM content is loaded. 
      // - including fonts, images, etc.
  });
</script>

Update March 2017

1 바닐라 자바 ​​스크립트

window.addEventListener('load', function() {
    console.log('All assets are loaded')
})

2 jQuery

$(window).on('load', function() {
    console.log('All assets are loaded')
})

행운을 빕니다.

답변

에 따르면 구문 분석 HTML 문서 – 끝 ,

  1. 브라우저는 HTML 소스를 구문 분석하고 지연된 스크립트를 실행합니다.

  2. 모든 HTML이 파싱되어 실행될 때 A DOMContentLoaded가 전달됩니다 document. 이벤트가로 버블 링됩니다 window.

  3. 브라우저는로드 이벤트를 지연시키는 리소스 (예 : 이미지)를로드합니다.

  4. 에서 load이벤트가 발송됩니다 window.

따라서 실행 순서는

  1. DOMContentLoadedwindow캡처 단계 의 이벤트 리스너
  2. DOMContentLoaded 이벤트 리스너 document
  3. DOMContentLoadedwindow버블 단계에서의 이벤트 리스너
  4. load이벤트 리스너 ( onload이벤트 핸들러 포함 )window

버블 load이벤트 리스너 ( onload이벤트 핸들러 포함 )를 document호출해서는 안됩니다. 캡처 load리스너 만 호출 할 수 있지만 문서 자체의로드가 아니라 스타일 시트와 같은 서브 리소스의로드로 인해 발생합니다.

window.addEventListener('DOMContentLoaded', function() {
  console.log('window - DOMContentLoaded - capture'); // 1st
}, true);
document.addEventListener('DOMContentLoaded', function() {
  console.log('document - DOMContentLoaded - capture'); // 2nd
}, true);
document.addEventListener('DOMContentLoaded', function() {
  console.log('document - DOMContentLoaded - bubble'); // 2nd
});
window.addEventListener('DOMContentLoaded', function() {
  console.log('window - DOMContentLoaded - bubble'); // 3rd
});

window.addEventListener('load', function() {
  console.log('window - load - capture'); // 4th
}, true);
document.addEventListener('load', function(e) {
  /* Filter out load events not related to the document */
  if(['style','script'].indexOf(e.target.tagName.toLowerCase()) < 0)
    console.log('document - load - capture'); // DOES NOT HAPPEN
}, true);
document.addEventListener('load', function() {
  console.log('document - load - bubble'); // DOES NOT HAPPEN
});
window.addEventListener('load', function() {
  console.log('window - load - bubble'); // 4th
});

window.onload = function() {
  console.log('window - onload'); // 4th
};
document.onload = function() {
  console.log('document - onload'); // DOES NOT HAPPEN
};

스 니펫 확장

답변

Chrome에서 window.onload는 <body onload=""> Firefox (버전 35.0)와 IE (버전 11) 모두 동일합니다.

다음 스 니펫으로 탐색 할 수 있습니다.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <!--import css here-->
        <!--import js scripts here-->

        <script language="javascript">

            function bodyOnloadHandler() {
                console.log("body onload");
            }

            window.onload = function(e) {
                console.log("window loaded");
            };
        </script>
    </head>

    <body onload="bodyOnloadHandler()">

        Page contents go here.

    </body>
</html>

Chrome 콘솔에 ‘창이로드 됨'(먼저 표시됨)과 ‘본문 onload’가 표시됩니다. 그러나 Firefox 및 IE에서는 “body onload”만 표시됩니다. window.onload.toString()IE & FF 콘솔에서 ” ” 를 실행 하면 다음이 표시됩니다.

“function onload (event) {bodyOnloadHandler ()}”

이는 “window.onload = function (e) …”할당을 덮어 씁니다.

답변

window.onload하고 onunload있는 바로 가기 document.body.onload및document.body.onunload

document.onload 과 onload 모든 HTML 태그의 핸들러는 그러나 트리거 결코 예약 할 것

onload문서에서 ‘ ‘-> true

답변

window.onload 그러나 그들은 종종 같은 것입니다. 마찬가지로 body.onload는 IE에서 window.onload가됩니다.