반응형
웹 페이지 로딩 중 화면 표시가 필요한 이유
웹 페이지에서 서버 요청이나 데이터 로딩이 오래 걸리는 경우 사용자는 아무런 반응이 없다고 느끼게 됩니다. 이때 화면에 로딩중 메시지나 애니메이션을 띄우면 UX가 크게 개선됩니다.
기존 방식에서는 showModelessDialog 같은 IE 전용 함수로 로딩창을 띄웠지만, 이는 이미 지원 종료된 방식입니다. 따라서 현대 웹에서는 CSS + JavaScript를 이용한 오버레이(overlay) 방식을 사용합니다.
1. 로딩 화면(loading.html) 구성
아래는 단순한 로딩 메시지를 표시하는 HTML입니다.
<div id="loadingOverlay">
<div class="loader">로딩중입니다...</div>
</div>CSS 예시
#loadingOverlay {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background-color: rgba(0,0,0,0.4);
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: white;
z-index: 9999;
display: none; /* 기본 숨김 */
}
2. 로딩 화면 제어 스크립트
function showLoading() {
document.getElementById("loadingOverlay").style.display = "flex";
}
function hideLoading() {
document.getElementById("loadingOverlay").style.display = "none";
}
3. 실제 페이지에서 로딩 표시 적용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Loading Test</title>
<script src="loading.js"></script>
<link rel="stylesheet" href="loading.css" />
</head>
<body>
<div id="loadingOverlay">
<div class="loader">로딩중입니다...</div>
</div>
<script>
// 페이지 시작과 동시에 로딩 표시
showLoading();
// 페이지가 완전히 로드되면 로딩 종료
window.onload = function() {
hideLoading();
};
</script>
</body>
</html>4. 사용 방법 요약
- 페이지 시작 시
showLoading()호출 → 로딩 화면 표시 - 데이터 로딩 완료 후
hideLoading()호출 - AJAX 요청 시에도 beforeSend / complete 에서 로딩 제어 가능
정리
showModelessDialog는 더 이상 사용할 수 없음- 대신 CSS 오버레이 + JS로 로딩 표시를 구현
- 페이지 로딩, AJAX, API 호출 등 다양한 로딩에 재활용 가능
- 모든 최신 브라우저에서 동작하는 안정적인 방식
이제 로딩 화면을 modern하게 구현하여 UX를 개선해 보세요.
반응형
'IT·디지털 > IT 개발자 팁' 카테고리의 다른 글
| [MSSQL] ROW를 COLUMN으로 변환해서 통계용 테이블 만들기 (PIVOT 없이) (0) | 2009.04.16 |
|---|---|
| ASP에서 엑셀로 결과값 출력하기 (0) | 2007.04.17 |
| RSS 2.0 구조와 작성 규칙 완벽 정리 (XML 기반 RSS 문서 제작 가이드) (0) | 2006.04.25 |
| 정적할당과 동적할당 (0) | 2006.04.08 |
| Visual Syudio .NET 2003 C++ 컴파일 에러 처리법(콘솔) (0) | 2006.03.30 |
