window.onload 와 document.ready 동작 순서

window.onload 와 document.ready 동작 순서

QA

window.onload 와 document.ready 동작 순서

본문

여태까지 제가알기로는

$(document).ready(function () {
 alert('a');
});


window.onload = function() {
 alert('b');
}

이렇게 있을때 alert의 순서는

a - b 의 순으로 알고있었는데

이번에 최신 jquery 3.4 버전으로 테스트해봤는데
b - a 의 순서로 호출이되는데 뭔지 모르겠습니다..

낮은버전으로하면 a - b로 잘 되구요...

이 질문에 댓글 쓰기 :

답변 1

궁금해서 릴리즈 노트 찾아보니 jquery3 에서는 비동기 방식으로 변경됐다고 하네요. 하지만 실질적으로는 이전 버전과 동일한 결과를 출력합니다.

 


<img src="http://null/img1.jpg">
<img src="http://null/img2.jpg">
<img src="http://null/img3.jpg">
<script>
    $(function(){
        console.log('jquery ready')
    });
    window.onload = function(){
        console.log('window onload');
    }
</script>

 

위 코드에서는 기존과 동일하게 dom이 로드되면 jquery ready가 출력되고, 컨텐츠(이미지)까지 로드가 완료된 이후에야 window onload가 출력됩니다. (이미지는 페이지 로딩을 위해 삽입했을 뿐이며, 존재하지 않는 이미지기 때문에 화면에 출력되지는 않습니다.)

 

다만, 빈 페이지, 혹은 페이지 내용이 적어서 dom 구성이 곧장 완료되는 경우라면 ready는 비동기 방식이기 때문에 window.onload보다 늦게 실행될 수 있습니다.

 

참고1 : https://jquery.com/upgrade-guide/3.0/#breaking-change-document-ready-handlers-are-now-asynchronous

참고2 : https://github.com/jquery/jquery/issues/3197 

감사합니다. 여러 포스팅을 보았는데 답을 못찾아서 포기할까 생각했었습니다...
비동기에 개념에 대하여 공부를 해야 할 것 같습니다..

단순히 컨텐츠 없이 테스트를 계속했었는데..
컨텐츠를 넣고 실행해보니 정상적으로 나오네요. 감사합니다^^^^

답변을 작성하시기 전에 로그인 해주세요.
전체 1,020
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT