window.onload 대 document.onload [닫기]

StackOverflow https://stackoverflow.com/questions/588040

  •  09-09-2019
  •  | 
  •  

문제

더 널리 지원되는 것은 무엇입니까? window.onload 또는 document.onload?

도움이 되었습니까?

해결책

그들은 언제 발사합니까?

window.onload

  • 기본적으로 전체 페이지가로드되면 해고됩니다. 포함 내용 (이미지, CSS, 스크립트 등).

일부 브라우저에서는 이제 document.onload DOM이 준비되면 화재가 발생합니다.

document.onload

  • DOM이 준비되었을 때 호출됩니다. 이전의 이미지 및 기타 외부 콘텐츠에로드됩니다.

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

window.onload 가장 널리 지원되는 것으로 보입니다. 사실, 가장 현대적인 브라우저 중 일부는 어떤 의미에서 교체되었습니다. document.onload ~와 함께 window.onload.

브라우저 지원 문제는 많은 사람들이 다음과 같은 라이브러리를 사용하기 시작한 이유입니다. jQuery 다음과 같이 준비중인 문서 확인을 처리합니다.

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

역사의 목적을 위해. window.onload vs body.onload:

비슷한 질문이 생겼습니다 코딩 포럼 의 사용법에 관해 잠시 돌아 왔습니다 window.onload ~ 위에 body.onload. 결과는 당신이 사용해야하는 것 같습니다 window.onload 구조를 동작과 분리하는 것이 좋기 때문입니다.

다른 팁

일반적인 아이디어는 그 것입니다 Window.onload 화재 문서의 창이있을 때 프레젠테이션 준비 그리고 문서 때 돔 트리 (문서 내 마크 업 코드에서 구축)는 완전한.

이상적으로는 구독합니다 돔 트리 이벤트, JavaScript를 통해 오프 스크린 조작을 허용합니다 거의 CPU 부하가 없습니다. 반대로, 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>

► result :

Chrome V20 (및 아마도 대부분의 현재 브라우저)에 대해 관찰 가능한 결과 동작은 다음과 같습니다.

  • 아니 document.onload 이벤트.
  • onload 내부에서 선언하면 두 번 발사됩니다 <body>, 내부에서 선언 할 때 <head> (이 행사는 다음과 같이 행동합니다 document.onload ).
  • 카운터의 상태에 따라 계산 및 행동하면 두 이벤트 동작을 모두 모방 할 수 있습니다.
  • 또는 선언합니다 window.onload HTML의 경계 내 이벤트 핸들러<head> 요소.

► 예 : 프로젝트 :

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

목록의 경우 창 객체의 이벤트 처리기, 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 제이쿼리

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

행운을 빌어요.

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

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

  2. ㅏ DOMContentLoaded The에서 파견됩니다 document 모든 HTML이 구문 분석되어 실행되었을 때. 이벤트가 기포 window.

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

  4. ㅏ load 이벤트는 The에서 파견됩니다 window.

따라서 실행 순서가 될 것입니다

  1. DOMContentLoaded 이벤트 청취자 window 캡처 단계에서
  2. DOMContentLoaded 이벤트 청취자 document
  3. DOMContentLoaded 이벤트 청취자 window 거품 단계에서
  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의 콘솔에는 다음을 볼 수 있습니다.

"함수 onload (이벤트) {bodyonloadhandler ()}"

즉, "window.onload = function (e) ..."가 덮어 쓰여 있음을 의미합니다.

window.onload 그리고 onunload 바로 가기입니다 document.body.onload 그리고 document.body.onunload

document.onload 그리고 onload 모든 HTML 태그의 핸들러는 예약 된 것으로 보이지만 결코 트리거되지 않았습니다.

'onload'문서 -> true

Window.onload 그러나 종종 동일합니다. 비슷하게 body.onload는 창이됩니다.

Window.onload는 표준입니다. PS3의 웹 브라우저 (Netfront 기반)는 Window 객체를 지원하지 않으므로 사용할 수 없습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top