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

요즘 작업을하다가 뭔가 스크립트가 이미지 보다 먼저 읽히는 그런 현상이 발생해서

준비 과정을 바꿔봤다.

일단 이걸 보자.

$(document).ready(function(){});
$(function(){});
window.onload = function(){};

자바스크립트 코딩에 있어 위와 같은 이벤트 핸들러에는

페이지가 로딩 되었을 때 일어나길 바라는 이벤트 들이 작성된다.

1번과 2번은 제이쿼리를 쓴다면 정말 흔하게 많이 쓰인다.

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

이 셋의 차이점은 이렇다.

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

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

$(document).ready(function(){});
$(function(){});

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

window.onload = function(){};

출처

http://blog.naver.com/silver889/220202235207

블로그 운영자는 제이쿼리로 width 100% 짜리 슬라이더를 짜다가 이미지가 로드가 완료되기 전에 스크립트가 발동해버려서 이미지가 반토막이 난 경험이 있다.

그럴땐 1,2 번 항목보다는 3번 항목을 이용해 보도록 하자.