, , , ,
http://painone7.tistory.com/tag/onreadystatechange

onload, DOMContentLoaded, onreadystatechange, defer, jQuery ready 페이지 로드 테스트
  • onload - 개체 로딩이 다 되었을 때 발생한다.
  • DOMContentLoaded - html DOM요소가 로딩이 완료되면 발생. 이미지가 로드되기 전에 실행(IE에선 지원 안함)
  • onreadystatechange - 개체의 상태(state)가 변경되면 발생된다.(IE, Opera 지원 readyState는 모든 브라우저가 반환)
    • uninitialized - 개체가 데이터로 초기화되지 않았다.
    • loading - 개체에 데이터가 로딩되고 있다.
    • loaded - 개체에 데이터 로딩이 완료되었다.
    • interactive - 개체에 데이터가 완전히 로딩되지 않았어도 사용자가 개체에 작용할 수 있다.
    • complete - 개체의 초기화가 완료되었다.
  • defer - 웹 페이지의 파싱이 완료된 다음 스크립트를 실행한다.(IE전용 HTML5에선 async 속성과 같이 표준속성으로 추가??)
  • jQuery ready - html DOM요소가 로딩이 완료되면 발생. 이미지가 로드되기 전에 실행

 

이벤트 발생 순서 확인
01 <script type="text/javascript"> var time = (new Date()).getTime(); </script>
02 <meta charset="utf-8">
03 <div id="load">
04 defer loading<br>Time : 2<br>defer loading<br>Time : 383 Image Widht : 700<br>jQuery ready interactive<br>Time : 252<br>jQuery ready interactive<br>Time : 253 Image Widht : 700<br>jQuery ready interactive<br>Time : 256 Image Widht : 700<br>DOMContentLoaded interactive<br>Time : 259<br>DOMContentLoaded interactive<br>Time : 259 Image Widht : 700<br>DOMContentLoaded interactive<br>Time : 261 Image Widht : 700<br>defer interactive<br>Time : 264 Image Widht : 700<br></div>
05 <script type="text/javascript" src="jquery-1.4.2.min.js"> </script>
06 <script type="text/javascript">
07     if(document.addEventListener) {
08         document.addEventListener( "DOMContentLoaded", function() {
09             jQuery("#load").append("DOMContentLoaded "+ document.readyState +"<br/>");
10             jQuery("#load").append("Time : "+ ((new Date()).getTime() - time) +"<br/>");
11         }, false);
12     } else {
13         document.attachEvent("onreadystatechange", function() {
14             if(!document.readyState || document.readyState === "complete" || document.readyState === "loaded") {
15                 jQuery("#load").append("onreadystatechange "+ document.readyState +"<br/>");
16                 jQuery("#load").append("Time : "+ ((new Date()).getTime() - time) +"<br/>");
17             }
18         });
19     }
20              
21     window.onload = function() {
22         jQuery("#load").append("onload "+ document.readyState +"<br/>");
23         jQuery("#load").append("Time : "+ ((new Date()).getTime() - time) +"<br/>");
24     }
25              
26     jQuery(window).ready(function() {
27         jQuery("#load").append("jQuery ready "+ document.readyState +"<br/>");
28         jQuery("#load").append("Time : "+ ((new Date()).getTime() - time) +"<br/>");
29     });
30 </script>
31 <script type="text/javascript" defer="defer">
32     jQuery("#load").append("defer "+ document.readyState +"<br/>");
33     jQuery("#load").append("Time : "+ ((new Date()).getTime() - time) +"<br/>");
34 </script>
  • IE 6,7,8
    • defer interactive
      Time : 34
    • jQuery ready interactive
      Time : 45
    • onreadystatechange complete
      Time : 48
    • onload complete
      Time : 57
  • chrome 6.0.472.63
    • defer loading
      Time : 23
    • jQuery ready loaded
      Time : 24
    • DOMContentLoaded loaded
      Time : 25
    • onload complete
      Time : 25
  • firefox 3.6.9
    • jQuery ready interactive
      Time : 76
    • DOMContentLoaded interactive
      Time : 76
    • onload complete
      Time : 81
  • opera 10.62
    • defer loading
      Time : 71
    • jQuery ready complete
      Time : 73
    • DOMContentLoaded complete
      Time : 73
    • onload complete
      Time : 74
  • safari 5.0.2
    • defer loading
      Time : 47
    • jQuery ready loaded
      Time : 49
    • DOMContentLoaded loaded
      Time : 51
    • onload complete
      Time : 52

 

페이지에 이미지(700x500)가 있을 시 이벤트 결과
01 <script type="text/javascript"> var time = (new Date()).getTime(); </script>
02 <meta charset="utf-8">
03 <div id="load">
04 </div>
05 <div><img src="http://img186.imageshack.us/img186/9810/logoap2.jpg?000"></div>
06 <script type="text/javascript" src="jquery-1.4.2.min.js"> </script>
07 <script type="text/javascript">
08     if(document.addEventListener) {
09         document.addEventListener( "DOMContentLoaded", function() {
10             jQuery("#load").append("DOMContentLoaded "+ document.readyState +"<br/>");
11             jQuery("#load").append("Time : "+ ((new Date()).getTime() - time) +" Image Widht : "+ jQuery("img").width() +"<br/>");
12         }, false);
13     } else {
14         document.attachEvent("onreadystatechange", function() {
15             if(!document.readyState || document.readyState === "complete" || document.readyState === "loaded") {
16                 jQuery("#load").append("onreadystatechange "+ document.readyState +"<br/>");
17                 jQuery("#load").append("Time : "+ ((new Date()).getTime() - time) +" Image Widht : "+ jQuery("img").width() +"<br/>");
18             }
19         });
20     }
21              
22     window.onload = function() {
23         jQuery("#load").append("onload "+ document.readyState +"<br/>");
24         jQuery("#load").append("Time : "+ ((new Date()).getTime() - time) +" Image Widht : "+ jQuery("img").width() +"<br/>");
25     }
26              
27     jQuery(window).ready(function() {
28         jQuery("#load").append("jQuery ready "+ document.readyState +"<br/>");
29         jQuery("#load").append("Time : "+ ((new Date()).getTime() - time) +" Image Widht : "+ jQuery("img").width() +"<br/>");
30     });
31 </script>
32 <script type="text/javascript" defer="defer">
33     jQuery("#load").append("defer "+ document.readyState +"<br/>");
34     jQuery("#load").append("Time : "+ ((new Date()).getTime() - time) +" Image Widht : "+ jQuery("img").width() +"<br/>");
35 </script>
  • IE 6,7,8
    • defer interactive
      Time : 40 Image Widht : 28
    • jQuery ready interactive
      Time : 51 Image Widht : 28
    • onreadystatechange complete
      Time : 2665 Image Widht : 700
    • onload complete
      Time : 2676 Image Widht : 700
  • chrome 6.0.472.63
    • defer loading
      Time : 67 Image Widht : 0
    • jQuery ready loaded
      Time : 70 Image Widht : 0
    • DOMContentLoaded loaded
      Time : 72 Image Widht : 0
    • onload complete
      Time : 2860 Image Widht : 700
  • firefox 3.6.9
    • defer loading
      Time : 52 Image Widht : 24
    • jQuery ready interactive
      Time : 65 Image Widht : 24
    • DOMContentLoaded interactive
      Time : 68 Image Widht : 24
    • onload complete
      Time : 2370 Image Widht : 700
  • opera 10.62
    • defer loading
      Time : 118 Image Widht : 50
    • jQuery ready interactive
      Time : 144 Image Widht : 50
    • DOMContentLoaded interactive
      Time : 145 Image Widht : 50
    • onload complete
      Time : 2518 Image Widht : 700
  • safari 5.0.2
    • defer loading
      Time : 63 Image Widht : 0
    • jQuery ready loaded
      Time : 69 Image Widht : 0
    • DOMContentLoaded loaded
      Time : 71 Image Widht : 0
    • onload complete
      Time : 2592 Image Widht : 700

 

defer속성에 DOMContentLoaded, onreadystatechange 이벤트 적용
01 <script type="text/javascript"> var time = (new Date()).getTime(); </script>
02 <meta charset="utf-8">
03 <div id="load">
04 </div>
05 <div><img src="http://img186.imageshack.us/img186/9810/logoap2.jpg?001"></div>
06 <script type="text/javascript" src="jquery-1.4.2.min.js"> </script>
07 <script type="text/javascript">
08     if(document.addEventListener) {
09         document.addEventListener( "DOMContentLoaded", function() {
10             jQuery("#load").append("DOMContentLoaded "+ document.readyState +"<br/>");
11             jQuery("#load").append("Time : "+ ((new Date()).getTime() - time) +" Image Widht : "+ jQuery("img").width() +"<br/>");
12         }, false);
13     } else {
14         document.attachEvent("onreadystatechange", function() {
15             if(!document.readyState || document.readyState === "complete" || document.readyState === "loaded") {
16                 jQuery("#load").append("onreadystatechange "+ document.readyState +"<br/>");
17                 jQuery("#load").append("Time : "+ ((new Date()).getTime() - time) +" Image Widht : "+ jQuery("img").width() +"<br/>");
18             }
19         });
20     }
21              
22     window.onload = function() {
23         jQuery("#load").append("onload "+ document.readyState +"<br/>");
24         jQuery("#load").append("Time : "+ ((new Date()).getTime() - time) +" Image Widht : "+ jQuery("img").width() +"<br/>");
25     }
26              
27     jQuery(window).ready(function() {
28         jQuery("#load").append("jQuery ready "+ document.readyState +"<br/>");
29         jQuery("#load").append("Time : "+ ((new Date()).getTime() - time) +" Image Widht : "+ jQuery("img").width() +"<br/>");
30     });
31 </script>
32 <script type="text/javascript" defer="defer">
33     if(document.addEventListener) {
34         document.addEventListener( "DOMContentLoaded", function() {
35             jQuery("#load").append("defer "+ document.readyState +"<br/>");
36             jQuery("#load").append("Time : "+ ((new Date()).getTime() - time) +" Image Widht : "+ jQuery("img").width() +"<br/>");
37         }, false);
38     } else {
39         document.attachEvent("onreadystatechange", function() {
40             if(!document.readyState || document.readyState === "complete" || document.readyState === "loaded" || document.readyState === "interactive") {
41                 jQuery("#load").append("defer "+ document.readyState +"<br/>");
42                 jQuery("#load").append("Time : "+ ((new Date()).getTime() - time) +" Image Widht : "+ jQuery("img").width() +"<br/>");
43             }
44         });
45     }
46 </script>
  • IE 6,7,8
    • jQuery ready interactive
      Time : 42 Image Widht : 28
    • defer complete
      Time : 2433 Image Widht : 700
    • onreadystatechange complete
      Time : 2435 Image Widht : 700
    • onload complete
      Time : 2447 Image Widht : 700
  • chrome 6.0.472.63
    • jQuery ready loaded
      Time : 24 Image Widht : 0
    • DOMContentLoaded loaded
      Time : 27 Image Widht : 0
    • defer loaded
      Time : 29 Image Widht : 0
    • onload complete
      Time : 2627 Image Widht : 700
  • firefox 3.6.9
    • jQuery ready interactive
      Time : 74 Image Widht : 24
    • DOMContentLoaded interactive
      Time : 77 Image Widht : 24
    • defer interactive
      Time : 80 Image Widht : 24
    • onload complete
      Time : 2544 Image Widht : 700
  • opera 10.62
    • jQuery ready interactive
      Time : 135 Image Widht : 50
    • DOMContentLoaded interactive
      Time : 136 Image Widht : 50
    • defer interactive
      Time : 138 Image Widht : 50
    • onload complete
      Time : 2707 Image Widht : 700
  • safari 5.0.2
    • jQuery ready loaded
      Time : 60 Image Widht : 0
    • DOMContentLoaded loaded
      Time : 65 Image Widht : 0
    • defer loaded
      Time : 67 Image Widht : 0
    • onload complete
      Time : 2660 Image Widht : 700

 

Time IE8

'개발 > JavaScript' 카테고리의 다른 글

배열 데이타 랜덤으로 섞기  (0) 2012.06.28
json 데이타 추가 및 지우기.  (0) 2011.09.27
이 페이지에서 뒤로가기 하거나, 창을 닫을 때 그리고 새로고침을 할때 확인창이 뜹니다.  (0) 2011.04.07
javascript 파일 업로드 사이즈 체크  (0) 2010.09.20
자바스크립트 객체(?)처럼 사용하기  (0) 2010.07.28

+ Recent posts

티스토리툴바