window.load document.ready 차이와 사용 객체

window.load 와 document.ready 는 웹브라우저에서 웹페이지가 처음 나타날 때 최초로 한번 실행된다. 하지만 사용되는 객체와 역할이 다르다. window.load 는 웹브라우저의 window 객체를 사용하고 document.ready 는 웹페이지의 html 의 document 객체를 사용한다. 리소스에도 차이가 있다. window.load는 리소스를 다 로드한 후 실행되지만 document.ready는 리소스없이 html 구성이 끝난 후 실행된다.

window.load 와 document.ready

window.load document.ready 차이와 객체

웹을 공부하거나 개발할 때 궁금한 것이 생긴다.

window.load 메서드와 document.ready 메서드이다.

특히 웹페이지가 로드되는 시점, 즉 화면에 표시되는 시점에서 이것을 자주 사용하는데 누구는 window.load 를 사용하고 누구는 document.ready 를 사용한다.

명확하게 구분하여 사용하는 사람도 있지만 가시적으로 차이가 없기에 그게 이거 이게 그거 하면서 그냥 사용하는 사람들도 있다.

결론부터 말하면 차이점은 사용되는 객체가 다르고 웹페이지가 나타나 이벤트가 발생하는 시점이 다르며 리소스를 사용을 하는지 여부가 있다.

다만, 눈으로 볼 때 가시적으로 같아 보이는 이유는 컴퓨터가 너무 빠르기 때문이다.

공통점

window.load 와 document.ready 의 공통점이 있다면 웹페이지가 나타날 때 최초 한번 실행된다는 점이다.

자바스크립트가 아닌 다른 언어에서 main() 함수와 같은 역할을 한다.

main() 함수는 프로그램이 시작될 때 최초로 단 한번 실행되는 역할을 하고 프로그램에 필요한 것들을 준비하고 초기화한다.

window.load 와 document.ready 의 역할도 main() 함수와 같은 역할을 하면서 웹페이지가 준비되는 동안 필요한 작업을 하게 된다.

다만, 내부적인 동작에서 차이를 보이는데 서로 사용되는 객체가 다르고, 웹페이지를 다루는 범위가 다르다.

window.load document.ready 차이

차이점

window.load 와 document.ready 란 코드를 다시 한번 살펴보자. 이들은 가시적으로 보이는 동작은 같지만 내부적으로 동작하는 것의 차이가 있다.

코드를 보면 바로 알 수 있다.

사용하는 객체

window.load 는 window 객체를 사용하며, document.ready 는 document 객체를 사용한다.

window 객체는 웹브라우저가 제공하는 기능을 자바스크립트에서 사용할 수 있다. document 객체는 html 태그로 구성된 웹페이지 기능을 자바스크립트에서 사용할 수 있다.

리소스

웹페이지가 처음 로드될 때 즉, 화면에 표시되기 시작할 때 리소스를 구성하게 된다.

리소스는 html를 제외한 파일이나 이미지 사운드와 같은 것들을 의미한다.

window.load 와 document.ready 가 실행되면서 리소스에 따라 동작하기도 하는데 window.load 는 리소스가 화면에 다 나타난 후에 실행되고 document.ready 는 html 이 화면에 구성된 이후 실행되는데 html 태그들만 구성되면 실행된다.

코드샘플

아래의 코드는 window.load 와 document.ready 를 구분하는데 자주 사용되는 코드이다.

주석의 내용을 보면 위에서 말한 내용이 두서없이 주절대고 있었음을 바로 알 수 있는 것이기도 하다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    $(document).ready( function() {
		/* without resources */ 
    });
    $(window).on('load', function() { 
		/* with resources */
    });
</script>

요약하면 다음과 같다.

• window.load
  웹브라우저의 window 객체 사용
  리소스를 모두 로드한 후 실행
• document.ready
  웹문서의 document 객체 사용
  html 구성이 끝난후 또는 로드한 후 실행