자바스크립트 로딩 표시 및 진행 상황 표시

10 Sep 2023

javascript

자바스크립트를 사용하여 웹 페이지를 만들 때, 사용자에게 로딩 상태와 진행 상황을 표시하는 것은 중요한 요소입니다. 사용자에게 로딩이 진행 중임을 알리고, 오랜 시간이 걸릴 수 있는 작업에 대한 진행 상황을 보여줌으로써 사용자 경험을 개선할 수 있습니다.

로딩 표시

로딩 표시를 위해 다양한 방법을 사용할 수 있습니다. 가장 일반적인 방법은 로딩 스피너를 표시하는 것입니다. 로딩 스피너는 원형으로 돌아가는 동그란 애니메이션으로, 로딩이 진행 중임을 시각적으로 나타냅니다.

예제 코드:

// 로딩 스피너 표시
function showLoader() {
    const loader = document.getElementById('loader');
    loader.style.display = 'block';
}

// 로딩 스피너 숨기기
function hideLoader() {
    const loader = document.getElementById('loader');
    loader.style.display = 'none';
}

// 페이지 로딩이 완료됐을 때 로딩 스피너 숨기기
window.addEventListener('load', function() {
    hideLoader();
});

위의 예제 코드는 showLoader() 함수로 로딩 스피너를 표시하고, hideLoader() 함수로 로딩 스피너를 숨기는 방법을 보여줍니다. 또한, window 객체의 load 이벤트를 이용하여 페이지 로딩이 완료됐을 때 로딩 스피너를 숨깁니다.

진행 상황 표시

로딩이 오랜 시간이 걸리는 작업을 수행할 때는 진행 상황을 사용자에게 표시하는 것이 좋습니다. 이를 위해 진행 바를 사용할 수 있습니다.

예제 코드:

// 진행 바 표시
function showProgress(progress) {
    const progressBar = document.getElementById('progress-bar');
    progressBar.style.width = progress + '%';
}

// 페이지 로딩 진행 상황 표시
window.addEventListener('load', function() {
    const totalResources = 10;
    let loadedResources = 0;
    
    // 리소스 로딩이 완료될 때마다 진행 상황 업데이트
    function resourceLoaded() {
        loadedResources++;
        const progress = (loadedResources / totalResources) * 100;
        showProgress(progress);
        
        // 모든 리소스 로딩이 완료된 경우 로딩 스피너 숨김
        if (loadedResources === totalResources) {
            hideLoader();
        }
    }
    
    // 이미지 리소스 로딩
    const image1 = new Image();
    image1.src = 'image1.jpg';
    image1.onload = resourceLoaded;
    
    const image2 = new Image();
    image2.src = 'image2.jpg';
    image2.onload = resourceLoaded;
    
    // ... (다른 리소스 로딩)
});

위의 예제 코드는 showProgress() 함수로 진행 바를 업데이트하고, 페이지 로딩 진행 상황을 보여주는 방법을 보여줍니다. resourceLoaded() 함수는 리소스 로딩이 완료될 때마다 호출되며, 로딩된 리소스의 개수에 따라 진행 바를 업데이트합니다. 모든 리소스 로딩이 완료되면 로딩 스피너를 숨기는 hideLoader() 함수를 호출합니다.

마무리

자바스크립트를 사용하여 로딩 상태와 진행 상황을 표시하는 방법을 알아보았습니다. 로딩 스피너와 진행 바를 통해 사용자에게 로딩이 진행 중임을 시각적으로 알리고, 오랜 시간이 걸리는 작업에 대한 진행 상황을 표시함으로써 사용자 경험을 개선할 수 있습니다. 이러한 기능을 적절하게 활용하여 웹 페이지를 만들어보세요!