jquery의 ready에 대해서

fancybox를 사용하다가 이상하다고 생각해서 찾아봄

fancybox에

J(document).ready

를 선언해서 사용하면

이게 정상적으로 동작하는게 이상해서..

 

 

function test1(){
  J(document).ready(function(){
   alert(1);
  });
 }

 function test2(){
  window.onload=function(){
   alert(2);
  }

 }

//]]>

<a href="#" onclick="test1();">test1</a>
<a href="#" onclick="test2();">test2</a>

 

라는 소스가 있으면

test1은 출력을 하지만

test2는 출력하지 않음

우리가 보통 window.onload 혹은

body.onload 대용의 느낌으로 ready를 사용하는데

실제로는 차이가 있다.

나도 저걸 테스트 하기전에는

ready는

onload 이벤트를 attach하는거라고 생각했다.

 

실제로 jquery를 보면

 

if ( document.readyState === "complete" ) {
   // Handle it asynchronously to allow scripts the opportunity to delay ready
   setTimeout( jQuery.ready );

  // Standards-based browsers support DOMContentLoaded
  } else if ( document.addEventListener ) {
   // Use the handy event callback
   document.addEventListener( "DOMContentLoaded", completed, false );

   // A fallback to window.onload, that will always work
   window.addEventListener( "load", completed, false );

  // If IE event model is used
  } else {
   // Ensure firing before onload, maybe late but safe also for iframes
   document.attachEvent( "onreadystatechange", completed );

   // A fallback to window.onload, that will always work
   window.attachEvent( "onload", completed );

   // If IE and not a frame
   // continually check to see if the document is ready
   var top = false;

   try {
    top = window.frameElement == null && document.documentElement;
   } catch(e) {}

   if ( top && top.doScroll ) {
    (function doScrollCheck() {
     if ( !jQuery.isReady ) {

      try {
       // Use the trick by Diego Perini
       // http://javascript.nwbox.com/IEContentLoaded/
       top.doScroll("left");
      } catch(e) {
       return setTimeout( doScrollCheck, 50 );
      }

      // detach all dom ready events
      detach();

      // and execute any waiting functions
      jQuery.ready();
     }
    })();
   }
  }

 

이런부분이 있다

현재 문서상태가 complete가 아니면 onload이벤트에 넣고

complete이면 바로 실행시키는것