안녕하세요 오늘은 자바스크립트를 활용해서 웹페이지 로딩화면을 만들어 보겠습니다.
오늘 배워볼 자바스크립트 메서드입니다.
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;
}
결과입니다.
'JavaScript' 카테고리의 다른 글
| [JavaScript] CoinGecko API 와 chart api를 사용하여 암호화폐 시장 데이터를 실시간으로 받아와 차트로 시각화하기 (0) | 2024.03.19 |
|---|---|
| [JavaScript] 카운터 만들기 (0) | 2024.03.17 |
| [JavaScript] CoinGecko API를 사용하여 현재 특정 가상화폐의 KRW 가격을 조회하여 나타내기 (0) | 2024.03.10 |
| [Javascript] Color Flipper 만들기 (0) | 2024.03.08 |
| [Javascript] 다운로드 이미지 미리보기 만들기 (0) | 2024.03.05 |
