상세 컨텐츠

본문 제목

[JQuery] document, window

Develop/JS

by 웽디 2016. 1. 4. 16:36

본문

$(document).ready()는 $(window).load()보다 먼저 실행되지만,
$(document).ready()는 문서 안의 리소스가 다 로딩되기도 전에 실행되기 때문에,
다 로딩이 된 후 작동되어야 하는 UI의 경우에는 문제가 생긴다.

결론은,
리소스가 필요로 하는 UI의 경우에는 $(window)를 사용하는 것이 좋고,
이런 케이스가 아닌 경우엔 좀 더 빠른 $(document)를 사용하는 것이 좋다.

$(document)

방법1★
$(document).ready(function(){
    console.log("[1] document, DOM이 전부 로드된 시점에 실행된다.");
});
cs

방법2
$(document).on("ready"function(){
    console.log("[2] document, DOM이 전부 로드된 시점에 실행된다.");
});
cs

방법3
$(document).on({ready: function() {
    console.log("[3] document, DOM이 전부 로드된 시점에 실행된다.");
}});
cs

방법 1~3의 실행 순서는 아래와 같다. 

여기서 알아둘 것은 [방법 1]이 가장 빠르게 실행된다는 점이다.
순서를 다르게 하여 실행해봐도 [방법 1]이 가장 빠르다.
코드는 ready_document.html 에서도 확인 가능.

$(window)

방법1
$(window).on("load"function() {
    console.log("[1] 페이지, 문서가 전부 로드된 시점에 실행된다.");
});
 
cs

방법2
$(window).on({load: function() {
    console.log("[2] 페이지, 문서가 전부 로드된 시점에 실행된다.");
}});
cs

방법3
$(window).load(function() {
   console.log("[3] 페이지, 문서가 전부 로드된 시점에 실행된다.");
});
cs

$(window)의 경우는 3개의 실행순서는 선언순이다. 

코드는 ready_window.html 에서도 확인 가능.

$(document)와 $(window)

$(document).ready()는 $(window).load()보다 먼저 실행된다.
위에 적어둔 방법들을 한번에 실행해보았을때, 실행 순서는 아래와 같다.

$(document)가 빠르고,
$(document).ready()가 빠르다면, 이 방법을 사용하는 것이 좋을까?

$(document).ready()는 $(window).load()보다 먼저 실행되지만,

$(document).ready()는 문서 안의 리소스가 다 로딩되기도 전에 실행되기 때문에,
다 로딩이 된 후 작동되어야 하는 UI의 경우에는 문제가 생긴다.
코드는 ready_all.html 에서도 확인 가능.




[추가] 즉시 실행

$(function() {
    console.log("로드되면서 실행된다.(self-invoking)");
});
cs
//$는 다른 라이브러리에서도 사용될 수 있기 때문에
//명확히 jQuery를 사용하겠다. 라고 명시를 해줄 수도 있다.
$(function($) {
   .....
})(jQuery);
cs



'Develop > JS' 카테고리의 다른 글

Javascript Pattern 정리  (0) 2017.08.28
[JQuery] document, window  (0) 2016.01.04

관련글 더보기

댓글 영역