답변:
일부 브라우저에서는 이제 document.onloadDOM이 준비되면 역할을 담당 하고 실행됩니다.
document.onload
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와 <body onload="">완전히 다른 (그리고 "작업 분리 구조는"이 상황에서 더 많은 의미가 있습니다). 답이 틀렸다는 것이 아니라 그 근거가 있습니다.
document.onloadjQuery와 JS가 동일 하다는 것을 의미합니까 document.ready?
일반적인 생각은 즉 위해 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) 에서 가져 왔습니다 .
이벤트 리스너 추가
<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 2017window.addEventListener('load', function() {
console.log('All assets are loaded')
})$(window).on('load', function() {
console.log('All assets are loaded')
})window.addEventListener('load', function() {...}). 또한 답변을 업데이트했습니다.
에 따르면 구문 분석 HTML 문서 - 끝 ,
브라우저는 HTML 소스를 구문 분석하고 지연된 스크립트를 실행합니다.
모든 HTML이 파싱되어 실행될 때 A DOMContentLoaded가 전달됩니다 document. 이벤트가로 버블 링됩니다 window.
브라우저는로드 이벤트를 지연시키는 리소스 (예 : 이미지)를로드합니다.
에서 load이벤트가 발송됩니다 window.
따라서 실행 순서는
DOMContentLoadedwindow캡처 단계 의 이벤트 리스너DOMContentLoaded 이벤트 리스너 documentDOMContentLoadedwindow버블 단계에서의 이벤트 리스너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
};document - load - capture실제로 발생합니다. 이는 문서로드가 왜 발생하지 않는지에 대한 검색에서 기대했던 것과 반대입니다. 기 묘하게도 일관성이 없습니다. 때때로 그것은 나타나고 때로는 나타나지 않으며 때로는 두 번 나타납니다 document - load - bubble. 그러나 결코 일어나지 않습니다 . 사용하지 않는 것이 좋습니다 document load.
load이벤트가 외부 리소스로 전달 되는 것을 고려하지 않았습니다 . 해당 이벤트는 버블 링되지 않으므로 일반적으로 문서에서 감지되지 않지만 캡처 단계에 있어야합니다. 이 항목은 <style>및 <script>요소 의로드를 나타 냅니다. Edge가 그것들을 보여주기에 적합하다고 생각하며 Firefox와 Chrome이 잘못되었습니다.
useCapture옵션은 새로운 것을 가르쳐주었습니다.
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 그러나 그들은 종종 같은 것입니다. 마찬가지로 body.onload는 IE에서 window.onload가됩니다.
한마디로
windows.onload되는 IE에서 지원하지 않는 6-8document.onload 최신 브라우저에서 지원하지 않습니다 (이벤트가 발생하지 않습니다)
window이벤트를 설명합니다 . 사용 예 :, . 2019 년 중반부터 모든 주요 브라우저와 호환됩니다. ----- developer.mozilla.org/en-US/docs/Web/API/Window/… ------ developer.mozilla.org/en-US/docs/Web/API/Window/load_eventonloadDOMContentLoadedwindow.addEventListener('DOMContentLoaded', callback)