DOMContentLoaded: DOM 준비 완료
DOMConetnLoaded 이벤트는 HTML 문서가 파싱되어 DOM 트리가 완성된 시점에 발생합니다. 외부 자원(이미지, 스타일시트 등)은 아직 로드되지 않았으므로, DOM 조작이나 초기화 작업에 주로 사용됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>DOMContentLoaded 활용</title>
<style>
#message { color: #1976d2; font-weight: bold; }
</style>
</head>
<body>
<div id="message">로딩 중...</div>
<img src="https://picsum.photos/200" alt="큰 이미지">
<script>
document.addEventListener('DOMContentLoaded', () => {
const message = document.getElementById('message');
message.textContent = 'DOM 준비 완료!';
console.log('이미지 로드 여부:', document.querySelector('img').complete); // false 가능성
});
</script>
</body>
</html>- DOMContentLoaded: DOM 완성 후 즉시 메시지 변경
- 이미지 로드 전이므로 크기나 상태 정보는 불완전
load: 모든 자원 로드 완료
load 이벤트는 HTML 문서를 포함하여 이미지, 스타일시트 등 외부 자원까지 모두 불러온 후에 발생합니다. 화면에 표시되는 요소의 최종 상태를 반영해야 할 때 적합합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>load 이벤트 활용</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
</head>
<body>
<section class="section">
<h1 class="title">로드 완료</h1>
<img id="banner" src="https://picsum.photos/400" alt="배너">
</section>
<script>
window.addEventListener('load', () => {
const banner = document.getElementById('banner');
console.log(`배너 크기: ${banner.offsetWidth}x${banner.offsetHeight}`);
document.querySelector('.title').textContent = '모든 자원 로드 완료!';
});
</script>
</body>
</html>페이지 내의 이미지와 모든 자원이 완전히 로드된 후, 이미지의 실제 크기를 사용자에게 알리는 간단한 작업을 수행합니다.
beforeunload와 unload: 페이지 이탈 관리
- beforeunload: 사용자가 페이지를 떠나기 직전 발생, 저장되지 않은 변경사항이나 경고 메시지를 표시할 때 유용합니다.
- unload: 페이지가 완전히 종료될 때 발생, 간단한 정리 작업이나 통계 데이터를 서버로 전송할 때 사용됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>beforeunload와 unload</title>
</head>
<body>
<h1>작업 저장 확인</h1>
<textarea id="note" placeholder="여기에 메모를 입력하세요"></textarea>
<script>
const note = document.getElementById('note');
window.addEventListener('beforeunload', (e) => {
if (note.value.trim()) {
e.preventDefault();
e.returnValue = ''; // 모던 브라우저에서 기본 메시지 표시
}
});
window.addEventListener('unload', () => {
const data = { page: location.pathname, exitTime: Date.now() };
// 비동기 로그 전송, 페이지 종료에 영향 최소화
navigator.sendBeacon('/log-exit', JSON.stringify(data));
});
</script>
</body>
</html>document.readyState와 readystatechange: 로딩 상태 추적
document.readyState 프로퍼티는 문서 로드 상태를 가집니다.
- loading: 문서 로딩 중
- interactive: DOM 완성, 외부 자원 로딩 중
- complete: 모든 자원 로드 종료
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>readyState 추적</title>
<style>
#progress { font-size: 18px; color: #388e3c; }
</style>
</head>
<body>
<div id="progress">상태: 로딩 중...</div>
<img src="https://picsum.photos/500" alt="큰 이미지">
<script>
const progress = document.getElementById('progress');
function updateProgress(state) {
const states = {
'loading': '상태: 로딩 중...',
'interactive': '상태: DOM 준비 완료',
'complete': '상태: 모든 자원 로드 완료'
};
progress.textContent = states[state] || `상태: ${state}`;
}
updateProgress(document.readyState);
document.addEventListener('readystatechange', () => {
updateProgress(document.readyState);
if (document.readyState === 'complete') {
console.log('페이지 완전히 준비됨');
}
});
</script>
</body>
</html>문서의 readyState가 변경될 때마다 현재 상태를 화면에 출력합니다. 이를 통해 "loading" → "interactive" → "complete" 순으로 상태가 변경되는 것을 확인할 수 있습니다.
'브라우저' 카테고리의 다른 글
| 외부 리소스 로딩 감지:onload와 onerror 이벤트 (0) | 2025.02.21 |
|---|---|
| defer와 async로 최적화된 스크립트 로딩 (0) | 2025.02.21 |
| 폼 전송하기: submit 이벤트 (1) | 2025.02.21 |
| 폼 데이터 변경 이벤트 조작하기 (0) | 2025.02.21 |
| 포커스와 블러 이벤트 (0) | 2025.02.21 |