본문 바로가기
프로그래밍 놀이터/Web

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

by 돼지왕 왕돼지 2013. 7. 11.
반응형



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

 


[jQuery/Tutorial] $(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 함수 )






반응형

댓글0