JS) ready() 메소드

Document 객체의 ready() 메소드

자바스크립트 코드는 웹 브라우저가 문서의 모든 요소를 로드한 뒤에 실행되어야 한다.
보통은 별다른 문제가 발생하지 않지만, 다음과 같은 경우에는 오류가 발생한다.

• 아직 생성되지 않은 HTML 요소에 속성을 추가하려고 할 경우
• 아직 로드되지 않은 이미지의 크기를 얻으려고 할 경우

그래서 자바스크립트에서는 Window 객체의 onload() 메소드를 이용하여 문서가 모두 로드된 뒤에 코드가 실행되도록 설정한다.

window.onload = function() {
    // 자바스크립트 코드
};

마찬가지로 jQuery에서는 Document 객체의 ready() 메소드를 이용하여 같은 결과를 보장한다.

$(document).ready(function() {
   // jQuery 코드
});

또한, jQuery에서는 같은 결과를 보장하는 더욱 짧은 문법도 다음과 같이 제공한다.

$(function() {
   // jQuery 코드
});

다음 예제는 문서가 모두 로드되는 시점과 창이 모두 로드되는 시점의 차이를 보여주는 예제이다.

$(document).ready( function() {
  // 문서가 전부 로드되었을 때 실행된다.
});
$(window).load( function() {
  // 모든 창이 모드 로드되었을 때 실행된다.
});

 

출처 :  https://www.devkuma.com/