2020. 11. 19. 15:10ㆍ프론트엔드/JAVASCRIPT
onload [ JAVASCRIPT]
window.onload = function(){
//실행될 코드
}- 문서의 모든 컨텐츠(images, script, css, etc)가 로드된 후 발생하는 이벤트(load이벤트)
- 문서에 포함된 모든 컨텐스가 로드된 후에 실행되기에 불필요한 로딩시간이 추가될 수 있음
- 동일한 문서에 오직 'onload'는 하나만 존재해야 함 (중복될 경우, 마지만 선언만이 실행됨)
- <body>요소의 속성(attribute)으로 지정될 수 있음.
<body onload="실행될코드">위와같이 <body> 요소의 속성으로 onload가 사용된 경우에는 'window.onload'는 무시됨
- window객체뿐만 아니라 원하는 객체(object)가 로드되었을 때 실행될 코드를 설정할 수도 있음
document.getElementById("myFrame").onload = function(){
//실행될 코드
}
- 이벤트를 직접 연결할 수도 있음
window.addEventListener('load', function(){
//실행될 코드
});
load [jQuery]
$(window).load(function(){
//실행될 코드
})- jQuery에서는 onload와 같은 동작을 하는 load메서드를 제공함
DOMContentLoaded [JAVASCRIPT]
window.addEventListener('DOMContentoaded', function(){
//실행될 코드
})- onload이벤트보다 먼저 발생함. 빠른 실행속도가 필요할 때 적합함
- IE8이하에서는 지원하지 않음
//IE8이하에 대체방안
//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('onreadtystatechange', arguments.callee);
domReady();
}
});
}
//DOM이 모두 로드되었을 때
function domReady(){
//실행될 코드
}
출처:https://stackoverflow.com/questions/1795089/how-can-i-detect-dom-ready-and-add-a-class-without-jquery/1795167#1795167
$(document).ready(); [jQuery]
$(document).ready(function(){
//실행될 코드
});- onload이벤트보다 먼저 발생함
- 모든 문서의 모든 자원이 다운로드되었을 때 발생하는 onload와 달리 DOM트리만 완성되면 바로 발생하므로 빠른 실행속도가 필요할 때 적합함
- 여러번 사용되면 선언 순서에 따라 순차적으로 실행됨
- $(function(){}); 으로 간략하게 사용가능
$(function(){
//실행될 코드
});
실행순서비교
(function(){ alert( '1번' ); })();
$(function(){ alert('2번'); });
$(document).ready(function(){ alert('3번'); });
window.onload = alert( '4번');
실행순서는 3번 -> 1번 -> 2번 -> 4번
:위와 같은 순서로 코드를 기술하였다고 할 때 실행순서를 생각해보면, '3번 -> 1번 -> 2번 -> 4번' 순으로 실행됨. 이유는 1번은 읽히는 시점에서 바로 1번이 실행되고(1번 코드가 맨 마지막에 기술되었다고 해도 가장 먼저 실행됨) 2번과 3번은 document(HTML문서)의 HTML태그 뿐만 아니라 CSS 자바스크립트 등을 포함한 처음부터 끝까지를 웹브라우저가 모두 인식한 다음에 실행됨(이미지 등의 리소스 다운로드는 기다리지 않음)
2번과 3번은 실행시기가 동일하지만 (동일한함수) 2번을 위에 작성했다는 가정하였을 때 2번이 먼저 실행된다고 봄
4번은 document(HTML문서) 뿐만아니라 이미지 등의 리소스 다운로드를 전부 기다렸다가 실행됨
'프론트엔드 > JAVASCRIPT' 카테고리의 다른 글
| [JS] Json key,value 가져오는 방법 (2) | 2020.12.22 |
|---|---|
| [JS] 자바스크립트 빈값 체크방법 (0) | 2020.12.14 |
| [JS] 반복문 (0) | 2020.11.11 |
| [JS] excel 다운로드 (0) | 2020.11.08 |
| [JS] 헤더 고정 스크롤 구현 (0) | 2020.11.07 |