[JQuery] document, window

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

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

$(document)

방법1★

$(document).ready(function(){     console.log("[1] document, DOM이 전부 로드된 시점에 실행된다."); }); Colored by Color Scripter

cs

방법2

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

cs

방법3

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

cs

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

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

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

$(window)

방법1

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

cs

방법2

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

cs

방법3

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

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)"); }); Colored by Color Scripter

cs

//$는 다른 라이브러리에서도 사용될 수 있기 때문에 //명확히 jQuery를 사용하겠다. 라고 명시를 해줄 수도 있다. $(function($) {    ..... })(jQuery);

cs

참고 사이트

http://recollectionis.tistory.com/entry/jQuery-function
http://maxim365.tistory.com/199