windows.onload 와 jquery $(document).ready()

windows.onload 와 jquery $(document).ready()

 

window.onalod는 페이지 리소스가지 모두 완료 되었을때 실행

$(document).ready()는 이미지등 리소스와 상관없이 DOM 생성이 완료되면 실행.

 

 

<script type="text/javascript">

if(document.readyState=="loaded" || document.readyState=="complete"){

//loaded와 complete가 중복 수행될 수 있음. 하나만 완료되어도 이벤트 중복 실행 안되게

//onreadystatechange null 처리 ie만 사용.

 

document.onreadystatechange = null;

alert("ie document 로드 완료");

}else{    //ie외 브라우져

document.onload=function(){

alert("document 로드 완료");

}

}

</script>

 

readyState 상탱 값

uninitialized : 기본상태값

loading : 파일을 내려받기 시작

interactive : 데이터를 완전히 내려받았지만 아직 데이터 전체를 이용할 수 없는 상태

complete : 모든 데이터를 이용할 수 있는 상태

 

참고 도서 : 자바스크립트 성능 최적화

 

 

궁금한점.

보통 자바스크립트는 페이지에서 읽을때 스크립트 실행이 완료되어야 밑에 페이지가 로드가 된다.

그래서 보통 스크립트를 body아래에 사용하여 컨텐츠 출력후에 처리한다.

head에 $(document).ready()  사용하면 성능 차이가 있을지??