$(document).ready() vs window.onload 차이를 비교해보자.

개발/JQuery & Javascript

한번사는인생. 2018. 4. 9. 14:02

html 소스 흐름은 위에서 아래로 순차적으로 진행이 된다라는 점을 명심하자.

아래와 같이 동일하게 사용된다.

1
2
3
$(function(){
    // 실행코드
});
cs

DOM이 완전히 로드되었을 때 코드를 실행하도록 구현되어있다.

1
2
3
window.onload = function(){
    // 실행코드
}
cs

화면에 필요한 모든 요소(css, js, image, iframe등등)들이 웹 브라우저 메모리에 모두 올려진 다음에 실행된다.

onload는 하나만 존재해야한다. 중복될 경우 마지막 선언된 onload만 실행된다.

<body> 요소의 attribute(속성)으로 지정될 수 있다.

1
<body onload="실행 코드">
cs

body에 onload를 사용한 경우, window.onload는 무시된다.

jQuery에서는 아래와 같이 동일하게 사용된다.

1
2
3
$(window).load(function(){
    // 실행코드
});
cs

결론적으로 $(document).ready()가 window.onload보다 먼저 실행이 된다.

시점의 차이를 알아두고 필요한 곳에 실행 코드를 작성해야겠다.