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

1. $(document).ready() 

- 외부 리소스, 이미지에 상관없이 브라우저가 DOM(Document Object Model) 트리가 생성된 직후 실행된다.

- window.load() 보다 더 빠르게 실행되고 중복 사용하여 실행하여도 선언한 순서대로 실행된다.

- (function(){ }); 와 같다.

 

$(document).ready(function(){

});

             | |

$(function(){

});

2. $(window).load()

- DOM의 standard 이벤트

- html의 로딩이 끝난 후에 시작된다.

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

- 화면이 모두 그려진 다음의 메세징이나 이미지가 관련 요소가 모두 올려진 다음의 애니메이션에 적합하다

- 전체 페이지의 모든 외부 리소스와 이미지가 브러우저에 불려운 이후 작동하게 되어 이미지가 안뜨너가 딜레이가 생길 때에는 그만큼의 시간을 기다려야 한다.

- 외부 링크나 파일 인크루트시 그 안에 window.load 스크립트가 있으면 둘 중 하나만 적용된다.

- body onload 이벤트와 같이 body에서 onload 이벤트를 쓰게 되면 모든 window.load() 가 실행되지 않는 현상이 발생한다.