jQuery에서는 페이지가 로드되었을 때 실행할 코드를 작성할 수 있는 여러 기본 함수가 있습니다. 그중에서도 자주 사용되는 $(document).ready()와 $(window).load()의 차이점을 알고 상황에 맞게 사용하는 것이 중요합니다. 각 함수가 어떤 기능을 수행하며 언제 사용하는지 예제와 함께 살펴보겠습니다.
1. $(document).ready()란?
$(document).ready() 함수는 DOM(Document Object Model)이 준비되었을 때 실행됩니다. 즉, 페이지의 HTML 요소가 모두 로드되고 구조가 준비되면 실행됩니다. 이미지나 외부 리소스가 모두 로드될 때까지 기다릴 필요 없이 DOM만 준비되면 실행되기 때문에 빠르게 실행됩니다.
사용 예시
- 버튼을 클릭했을 때 이벤트를 적용하거나, 텍스트를 변경하는 등 DOM 요소에 대한 조작이 필요할 때 사용합니다.
코드 예제
$(document).ready(function() {
// 버튼 클릭 이벤트 설정
$('#myButton').on('click', function() {
alert('Button clicked!');
});
// 텍스트 변경
$('#title').text('페이지 로드 완료!');
});
위 예제에서는 DOM이 로드되면 버튼 클릭 이벤트가 설정되고, 특정 요소의 텍스트가 변경됩니다.
2. $(window).load()란?
$(window).load() 함수는 페이지의 모든 요소가 완전히 로드되었을 때 실행됩니다. 여기에는 이미지, 비디오, CSS, 외부 스크립트 등의 모든 리소스가 포함됩니다. 페이지의 모든 내용이 완전히 로드되었는지 확인해야 할 때 사용합니다.
사용 예시
- 이미지 크기 조정, 레이아웃 배치, 또는 외부 리소스가 필요할 때 사용합니다.
- 예를 들어, 슬라이더나 갤러리 같은 기능에서 이미지를 모두 로드한 후 조작이 필요할 때 적합합니다.
코드 예제
$(window).load(function() {
// 이미지 슬라이더 초기화
initializeSlider();
// 갤러리 레이아웃 조정
adjustGalleryLayout();
});
이 코드는 페이지의 모든 이미지와 리소스가 로드된 후 슬라이더 초기화 함수와 갤러리 레이아웃 조정 함수를 실행합니다.
3. $(document).ready()와 $(window).load()의 차이점 정리
| 함수 | 설명 | 사용 시기 |
| $(document).ready() | DOM이 로드되고 요소가 준비되었을 때 실행됨 | 요소 이벤트 설정, 기본 조작 |
| $(window).load() | 페이지의 모든 리소스가 완전히 로드된 후 실행됨 | 이미지나 외부 리소스를 사용할 때 |
4. ready()와 load()의 최신 문법
jQuery 버전이 업데이트되면서 ready()와 load()의 작성 방식이 변경되었습니다. 최신 방식으로 작성하는 것이 권장됩니다.
최신 문법 예제
1. ready() 함수 최신 문법
$(function() {
console.log('DOM is ready!');
});또는
$(document).ready(function() {
console.log('DOM is ready!');
});
2. load() 함수 최신 문법
jQuery 3.0 버전부터 load()는 더 이상 일반 이벤트 메서드로 지원되지 않으므로, $(window).on('load', ...)로 작성해야 합니다.
$(window).on('load', function() {
console.log('All resources are loaded!');
});
5. 실전 예제: 이미지와 DOM 조작을 병행하는 경우
예를 들어, DOM이 준비되면 텍스트를 변경하고, 페이지의 모든 이미지가 로드되면 갤러리 배치를 조정해보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Example</title>
<style>
.gallery img { width: 200px; height: auto; }
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1 id="title">Loading...</h1>
<div class="gallery">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
</div>
<script>
// DOM이 준비되면 텍스트 변경
$(document).ready(function() {
$('#title').text('DOM is ready!');
});
// 모든 리소스가 로드되면 갤러리 배치 조정
$(window).on('load', function() {
adjustGalleryLayout();
});
// 갤러리 배치 조정 함수
function adjustGalleryLayout() {
$('.gallery img').each(function() {
$(this).css('border', '2px solid blue');
});
console.log('Gallery layout adjusted after all images are loaded.');
}
</script>
</body>
</html>'Develop' 카테고리의 다른 글
| [jQuery] script 실행 순서 ready, load 및 기타 실행 순서 제어 방법 (5) | 2024.11.07 |
|---|---|
| [jQuery] click 이벤트와 touchend 이벤트의 차이점 및 예제 (6) | 2024.11.05 |
| [PostgreSQL] WITH 문법 상황별 사용 예제 (3) | 2024.11.04 |
| [jQuery] 요소의 data 속성 선택자 사용법과 다양한 예제들 (4) | 2024.11.01 |
| [PostgreSQL] insert 혹은 update upsert - ON CONFLICT 사용 방법 (7) | 2024.10.31 |