제2의 비엔지니어 인생관을 꿈꾸며

Posted
Filed under jQuery

jquery 첨에 나왔을때.. jquery 를 이용안했던 가장큰이유는 
첫번째 익숙한 레어코딩, 
두번째가. 바로 이 로딩 시점문제였다 ,
하지만 세번째 더 큰 문제는.. 공부를 안해서...첫번째,두번재 오해(?) 가 생겼다.

jquery 의 방식은 ready  펑션이 onload(window) 방식에서라는 착각에서이다, 
$(document).ready 의 로드 시점은 window.load 이 시점과 다르다,

$(document).ready vs $(window).load  
로딩시점

$(document).ready(handler) 의 로드 시점은 페이지가 로딩시 필요한 최소한의 DOM Tree를
생성한 직후 실행된다. 이는 페이지 구성에 필요한 이미지 , text , 미디어  , css 등과 관계없이
DOM tree 구성 후 실행되에 ready 안에 코딩들은 인터프린터 방식으로 컴파일한다.

$(window).load(
handler) 의 로드 시점은 DOM tree 로딩후 페이지에 필요한 text ,image , media ,
font , css 등 모든 요소들을 로딩 한후 일어난다.

아래를 보고 로딩 이벤트에대해 다시한번 숙지하자



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

=  $(function(){});  와 같음
$(document).read(function(){  // 변수선언 //jquery 코딩 // 바인딩 // 함수생성 // 레어js 코딩가능});  
- DOM Tree 로딩 후 바로 호출
- 변수 , 함수의 경우  지역변수/ 지역함수 (stack) , 안에서만 사용가능


$(window).load(function(){}); 
$(window).load(function(){  // 변수선언 //jquery 코딩 // 바인딩 // 함수생성 // 레어js 코딩가능});  
- DOM Tree + 페이지 객체들 로딩 후 호출
- 변수 , 함수의 경우  지역변수/ 지역함수 (stack) , 안에서만 사용가능


<script language="javascript">

     $(document).read(function() { 
alert("document ready");  });

      $(window).load(function() {  alert("window call"); });

      alert("global call")

</script>

결론 - 로딩순서 

1.global call 
2.document ready
3.window call.



2018/01/19 11:52 2018/01/19 11:52