[자바스크립트] 로딩 애니메이션 추가하기

소요 시간: 5분 조회수: 98

자바스크립트로 로딩 중 이미지를 표시하는 방법을 설명드리겠습니다. 이를 위해 HTML, CSS, 그리고 자바스크립트를 사용할 것입니다.


페이지 로드가 완료되는 시점

페이지가 로드 완료되었음을 확인하는 가장 일반적인 방법은 window 객체의 load 이벤트를 사용하는 것입니다. 이 이벤트는 모든 리소스(이미지, 스크립트, 스타일 등)를 포함한 전체 페이지가 완전히 로드되었을 때 발생합니다.


상세 설명

window 객체의 load 이벤트는 페이지의 모든 요소들이 로드된 후 발생합니다. 이는 HTML 문서뿐만 아니라 모든 외부 리소스(이미지, CSS 파일, JS 파일 등)도 포함됩니다.

1. HTML

먼저, 로딩 중 이미지를 표시할 HTML 구조를 만듭니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loading Image Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="loading">
        <img src="loading.gif" alt="Loading...">
    </div>
    <div id="content">
        <!-- 여기에 실제 콘텐츠가 들어갑니다 -->
        <h1>콘텐츠가 로드되었습니다!</h1>
    </div>
    <script src="script.js"></script>
</body>
</html>

여기서 #loading div는 로딩 이미지를 포함하고 있으며, #content div는 실제 콘텐츠를 포함하고 있습니다.

2. CSS

로딩 이미지를 스타일링하고, 초기에는 콘텐츠를 숨깁니다.

/* styles.css */
body {
    font-family: Arial, sans-serif; /* 페이지의 기본 글꼴을 Arial로 설정합니다. */
}

#loading {
    position: fixed; /* 로딩 화면을 전체 화면에 고정합니다. */
    width: 100%; /* 로딩 화면의 너비를 100%로 설정합니다. */
    height: 100%; /* 로딩 화면의 높이를 100%로 설정합니다. */
    display: flex; /* 로딩 화면을 플렉스 박스로 설정하여 중앙에 정렬합니다. */
    justify-content: center; /* 로딩 화면의 콘텐츠를 가로로 중앙에 배치합니다. */
    align-items: center; /* 로딩 화면의 콘텐츠를 세로로 중앙에 배치합니다. */
    background-color: rgba(255, 255, 255, 0.8); /* 배경을 반투명 흰색으로 설정합니다. */
}

#content {
    display: none; /* 처음에 콘텐츠를 숨깁니다. */
}

이 CSS 코드는 웹 페이지의 기본 스타일과 로딩 화면을 설정합니다. #loading은 로딩 화면을 전체 화면에 고정하고 중앙에 배치하며, 반투명한 흰색 배경을 적용합니다. #content는 페이지 로드 시 처음에 콘텐츠를 숨깁니다.


3. 자바스크립트

페이지 로드가 완료되면 로딩 이미지를 숨기고 실제 콘텐츠를 표시하는 스크립트를 작성합니다.

// script.js
window.addEventListener('load', function() {
    var loading = document.getElementById('loading');
    var content = document.getElementById('content');
    
    loading.style.display = 'none';
    content.style.display = 'block';
});

동작 방식

  1. window.addEventListener('load', ...)는 페이지의 모든 리소스가 로드된 후에 호출됩니다.
  2. 콜백 함수 내에서 document.getElementById를 사용하여 로딩 이미지와 콘텐츠를 가리킵니다.
  3. 로딩 이미지의 display 속성을 none으로 설정하여 숨깁니다.
  4. 콘텐츠의 display 속성을 block으로 설정하여 표시합니다.



이렇게 하면 페이지가 로딩되는 동안 로딩 이미지를 표시하고, 로드가 완료되면 실제 콘텐츠를 보여줄 수 있습니다.

인기글

자바스크립트 리스트