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
감사합니다. 여러 포스팅을 보았는데 답을 못찾아서 포기할까 생각했었습니다...
비동기에 개념에 대하여 공부를 해야 할 것 같습니다..
단순히 컨텐츠 없이 테스트를 계속했었는데..
컨텐츠를 넣고 실행해보니 정상적으로 나오네요. 감사합니다^^^^
