[jQuery/Tutorial] $(document).ready() 와 $(window).load() 의 차이.

$(document).ready() 와 $(window).load() 의 차이

[이전강좌] $ 와 $() 의 차이.

$(document).ready()

$(document).ready() 는 페이지의 DOM 이 모두 load 되는 순간 1회만 불린다.

$(window).load()

$(window).load( function(){...} ) 의 경우는 페이지 전체가 다 load 되는 순간 1회만 불린다.

둘의 차이가 잘 이해가 안되는데?

DOM load 와 Page load 의 차이를 이해하면 이해가 될텐데,

page load 는 img 나 iframe 태그가 있을 경우 그것들의 load 가 모두 끝나는 순간을 

page load 가 끝나는 시점으로 본다.

따라서 DOM 이 모두 준비되어도 JS 코드들을 바로 수행하지 않고 계속 기다리게 되고,

이미지 사이즈가 크거나 iframe 으로 연결된 사이트의 loading time 이 길면 

유저는 JS 로딩까지 꽤 오랜 시간을 기다려야만 한다.

따라서 UX 상 $(window).load() 를 쓰는 것은 좋지 않다.

$(document).ready() 축약형?

$(document).ready() 는 $(function(){ ... }) 의 형태로도 쓸 수 있으나, 

초보자를 고려하여 축약형을 사용하지 않을 것이 권장된다.

[다음강좌] jQuery 와 다른 JS Library 함께 쓰기 ( noConflict 함수 )

document, DOM, dom load, iframe, img, javascript, jQuery, js, load, page load, ready, tutorial, UX, window, 강좌, 권장, 기초 강좌, 비추, 아이프레임, 이미지, 차이, 초보자, 추천, 축약형, 튜토리얼