[jQuery] $(document).ready() 와 $(window).on("load")

회사에서 이 2가지를 쓰는 곳이 있었음.

둘의 차이는?

 

https://karzin.tistory.com/221

[jQuery] $(document).ready() 와 $(window).on("load")

 

위 함수가 어떠한 순서로 웹사이트가 load되는지

 

$(document).ready()

$(document).ready()의 경우 DOM(Document Object Model) 페이지가 JavaScript코드를 사용할 수 있을 때 실행이 됩니다. (참조)

 

 

$(window).on("load")

$(window).on("load")의 경우에는 DOM을 포함한 모든 페이지가 준비가 되면 실행이 됩니다. (참조)

때문에 $(document).ready()보다 늦게 실행이 되는 모습을 보여줍니다.

 

$(window).on("load")가 더 오래걸린다!

 

 

 

$(document).ready()와 $(window).on("load")의 실행 순서

위 코드를 직접 console에 찍어보면 아래와 같은 결과를 확인하실 수 있습니다.

 

console에서 찍어본다면.

위 설명에 적어놓은 것 처럼 DOM객체가 JavaScript를 실행할 수 있는 상태가 된다면 $(document).ready를, 모든 페이지에 대한 준비가 완료된다면 $(window).on("load")함수가 실행이 된다는걸 확인할 수 있습니다.

 

대략 이런느낌

실행 순서

 

 

https://karzin.tistory.com/221

[jQuery] $(document).ready() 와 $(window).on("load")

 

 

$(document).ready(function(){}) 도 있을 경우엔..

 

$(document).ready(function(){
    console.log('document.ready');
});

$(window).ready(function(){
    console.log('window.ready');
});

window.onload = function() {
    console.log('window.onload');
};

-- RESULT
> document.ready
> window.ready
> window.onload