JavaScript
[JavaScript] 웹페이지 로딩화면
teamnova
2024. 3. 14. 12:00
728x90
안녕하세요 오늘은 자바스크립트를 활용해서 웹페이지 로딩화면을 만들어 보겠습니다.
오늘 배워볼 자바스크립트 메서드입니다.
setTimeout
JavaScript에서 제공하는 내장 함수로, 특정 함수나 코드를 지정된 시간이 지난 후에 한 번 실행하도록 예약합니다. 이 함수는 비동기적으로 작동하며, 지정된 대기 시간(밀리초 단위)이 경과한 후에 콜백 함수를 실행시킵니다.
코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로딩 화면 예제</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="loadingScreen" class="loading-screen">
로딩 중...
</div>
<div id="content" style="display: none;">
<!-- 여기에 페이지 콘텐츠가 들어갑니다. -->
<h1>페이지 로드 완료!</h1>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
setTimeout(function() {
document.getElementById('loadingScreen').style.display = 'none';
document.getElementById('content').style.display = 'block';
}, 3000); // 3000ms = 3초 후 로딩 화면을 숨기고 콘텐츠를 표시합니다.
});
</script>
</body>
</html>
style.css
.loading-screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
z-index: 9999;
}
결과입니다.