[JavaScript, JQuery] 자바스크립트 function start

onload와 (function(){..}, $(document).ready(function){..}; 의 차이 

---

//1
$(doument).ready(function(){});

//2
$(function(){});

//3
window.onload = function(){};

 

자바스크립트 코딩에 있어 위와 같은 이벤트 핸들러에는 페이지가 로딩 되었을 떄 일어나길 바라는 이벤트 들이 작성된다.

 

1번과 2번은 정말 흔하게 많이 쓰이며 제이쿼리를 사용할 때 쓰인다.

3번 같은 경우엔 DOM레벨 0방식의 자바스크립트이다.

 

이 셋의 차이점은 이렇다.

 

1번과 2번의 경우에는 리소스와 상관없이 DOM만 생성되어도 호출이 된다.

즉, 이미지와 같은 리소스를 요구하는 페이지일 경우 이미지의 로딩 완료와 상관없이 진행된다.

 

그러나 3번 항목의 경우에는 현재 호출 되고 있는 페이지에서 DOM뿐만 아니라 리소스 호출도 완료 되었을 경우에 실행이 된다.

 

Reference : recoveryman.tistory.com/104

[자바스크립트, 제이쿼리] onload와 (function(){...}, $(document).ready(function){ ... }; 의 차이