jQuery 페이지 로드 후 실행 이벤트

728x90

목 차

• 1. $(document).ready()
• 2. 주요 개념
• 2-1. DOM이 로드 되었을 때 실행
• 2-2. HTML 문서와 외부 리소스 로드의 차이
• 3. 문법
• 4. 사용 예제
• 4-1. 기본 사용
• 4-2. 축약형 사용
• 4-3. 이벤트 핸들러 등록
• 5. 여러 개의 ready() 호출
• 6. $(document).ready()와 window.onload의 비교
• 7. 정리

 

1. $(document).ready()

• $(document).ready()는 jQuery에서 DOM(Document Object Model)이 완전히 로드되고 파싱된 후에 실행되는 코드를 정의하는 메서드입니다.
• 이 메서드는 HTML 문서가 완전히 로드된 뒤에 JavaScript 코드를 실행할 수 있도록 보장하며, 특히 문서 로드 시점의 이벤트 처리에 유용합니다.

 

---

 

2. 주요 개념

2-1. DOM이 로드 되었을 때 실행

• $(document).ready()는 DOM 트리가 완전히 준비되었을 때 실행됩니다.
  즉, HTML 문서의 요소들이 파싱되어 JavaScript에서 접근 가능한 상태가 된 이후에 실행됩니다.
  이는 이미지, 동영상 같은 리소스가 모두 로드되기 전에 실행됩니다.

2-2. HTML 문서와 외부 리소스 로드의 차이 (필수 지식)

• $(document).ready()는 DOMContentLoaded 이벤트에 해당하며, DOM이 로드된 상태에서 작동합니다.
• window.onload는 페이지의 모든 리소스(이미지, CSS, 스크립트 등)가 로드된 후 실행됩니다.

 

---

 

3. 문법

// 기본 문법
$(document).ready(function() {
  // 실행할 코드
});



// 축약형
$(function() {
  // 실행할 코드
});

 

---

 

4. 사용 예제

4-1. 기본 사용

$(document).ready(function() {
  console.log("DOM이 준비되었습니다!");
  $("p").text("jQuery Ready 실행 완료!");
});

 

4-2. 축약형 사용

$(function() {
  console.log("DOM이 준비되었습니다! (축약형)");
});

 

4-3. 이벤트 핸들러 등록

$(document).ready(function() {
  $("button").on("click", function() {
    alert("버튼이 클릭되었습니다!");
  });
});

 

---

 

5. 여러 개의 ready() 호출

• jQuery는 여러 개의 $(document).ready() 호출을 지원하며, 각각의 함수가 독립적으로 실행됩니다.

$(document).ready(function() {
  console.log("첫 번째 ready!");
});

$(document).ready(function() {
  console.log("두 번째 ready!");
});

// 출력 결과
첫 번째 ready!
두 번째 ready!

 

---

 

6. $(document).ready()와 window.onload의 비교

특징	$(document).ready()	window.onload
실행 시점	DOM이 준비되면 실행	페이지의 모든 리소스가 로드된 후 실행
속도	더 빠르게 실행	모든 리소스를 기다리므로 느림
사용 예시	DOM 조작, 이벤트 등록	이미지 크기 확인, 전체 페이지 로드 후 작업
의존성	jQuery 필요	순수 JavaScript

// $(document).ready()
$(document).ready(function() {
  console.log("DOM이 로드되었습니다.");
});

// window.onload
window.onload = function() {
  console.log("페이지의 모든 리소스가 로드되었습니다.");
};

 

---

 

7. 정리

• $(document).ready()는 DOM이 완전히 로드되었을 때 실행될 코드를 작성하는 가장 안전하고 쉬운 방법입니다.
• DOM이 준비되기 전에 실행하려고 하면 요소를 찾거나 조작하는 코드에서 오류가 발생할 수 있습니다.
• jQuery 3.0 이후에는 DOMContentLoaded 이벤트가 자동으로 처리되므로, 간단한 경우에는 생략 가능하나 복잡한 코드에서는 여전히 유용합니다.