https://webdir.tistory.com/515 [WEBDIR]
onload
문서의 모든 콘텐츠(images, script, css, etc)가 로드된 후 발생하는 이벤트이다(load 이벤트라고들 한다).
window.onload \= function() { //실행될 코드 }- 문서에 포함된 모든 콘텐츠가 로드된 후에 실행되기에 불필요한 로딩시간이 추가될 수 있다.
- 동일한 문서에 오직onload는 하나만 존재해야 한다.
- 중복될 경우, 마지막 선언이 실행된다.
- 외부 라이브러리에서 이미 선언된 경우 이를 찾아 하나로 합치는 과정이 필요하다.
- 외부의 자원(iframe, image, script)을 사용하는 경우에도 해당된다.
요소에 속성(attribute)으로 지정될 수 있다.
<body onload\="실행될 코드"\>- 위와 같이 사용된 경우,window.onload로 지정된 것은 무시된다.
window 객체뿐만 아니라 원하는 객체(object)가 로드되었을때 실행될 코드를 설정할 수 있다.
document.getElementById("myFrame").onload \= function() { //실행될 코드 }이벤트를 직접 연결할 수도 있다.
window.addEventListener('load', function(){ //실행될 코드 }); jQuery loadjQuery에서는 onload와 같은 동작을 하는 load 메소드를 제공한다.
$(window).load( function() { //실행될 코드 })DOMContentLoaded
HTML과 script가 로드된 시점에 발생하는 이벤트이다.
window.addEventListener('DOMContentLoaded', function(){ //실행될 코드 })- onload 이벤트보다 먼저 발생한다. 빠른 실행속도가 필요할때 적합하다.
- IE8 이하에서는 지원하지 않는다.
IE8 이하에 대체방안
비슷한 기능을 하는 jQuery의 ready 메소드를 순수 자바스크립트로 대체하는 방법을 탐구하다 발견한 방법이다.(링크)
// Mozilla, Opera, Webkit
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", function () {
document.removeEventListener("DOMContentLoaded", arguments.callee, false);
domReady();
}, false);
}
// Internet Explorer
else if (document.attachEvent) {
document.attachEvent("onreadystatechange", function () {
if (document.readyState === "complete") {
document.detachEvent("onreadystatechange", arguments.callee);
domReady();
}
});
}
//DOM이 모두 로드 되었을 때
function domReady () {
//처리할 내용
}
자바스크립트의 DOM 트리가 준비되었을때의 시점을 컨트롤하는 메소드로 DOMContentLoaded의 jQuery 버전이라 생각하자.
$(document).ready(function(){ //실행될 코드 });- onload 이벤트보다 먼저 발생한다. 즉, 문서의 모든 자원이 다운로드되었을때 발생하는 onload와 달리 DOM 트리만 완성되면 바로 발생하므로 빠른 실행속도가 필요할때 적합하다.
- 여러번 사용되면 선언 순서에 따라 순차적으로 실행된다.
'C Lang > Web Lang Program Diary' 카테고리의 다른 글
| daum에서 제공하는 html 네이밍 컨벤션 (1) | 2019.07.03 |
|---|---|
| HTTPS와 SSL 인증서 (0) | 2019.07.03 |
| html,css, script의 로딩 순서 (1) | 2019.06.26 |
| 브라우저의 역할과 스크립트의 로드 시점 (0) | 2019.06.26 |
| WebSocket이란? (0) | 2018.07.23 |