JavaScriptでローディングの進捗をパーセント、プログレスバーで表示する

WEB制作、マーケティングに関する情報をお届けします。

JavaScriptでローディングの進捗をパーセント、プログレスバーで表示する

2024.08.23

カテゴリ：WEB制作

タグ：

JavaScript

画像を多く使ったサイトではサイトの読み込みから表示までに多くの時間が赤かる場合があります。
本記事ではJavaScriptでローディングの進捗を確認し、サイト側にパーセント、プログレスバーで表示する方法を紹介します。

デモを見る

1 コードを紹介
2 コードの解説
3 まとめ

コードを紹介

HTML

<div class="loading" id="loadingWrapper">
    <div class="count_wrap" id="countWrap">
        <span id="count">0</span>%  <!-- 初期値0% -->
        <div class="progress_bar">
            <div id="progress_bar_count"></div> <!-- プログレスバー -->
        </div>
    </div>
</div>

<ul>
    <li><img src="img/01.jpg"></li>
    <li><img src="img/02.jpg"></li>
    <li><img src="img/03.jpg"></li>
    <li><img src="img/04.jpg"></li>
    <li><img src="img/05.jpg"></li>
    <li><img src="img/06.jpg"></li>
    <li><img src="img/07.jpg"></li>
</ul>

CSS

※Googleフォントをインストールしていますが必須ではありません。

<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300..800;1,300..800&family=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet">
<style>
    .loading {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #FFF;
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2em;
        transition: opacity 0.3s ease;
    }
    .count_wrap {
        width: 100%;
        text-align: center;
        font-weight: 400;
        font-family: 'Montserrat', sans-serif;
        font-style: italic;
        color: #FFA99F
    }

    .progress_bar {
        width: 100%;
        height: 1px;
        margin-top: 10px;
        position: relative;
    }
    #progress_bar_count {
        height: 100%;
        left: 0;
        position: absolute;
        background-image: linear-gradient(-225deg, #FFE29F 0%, #FFA99F 48%, #FF719A 100%);
        width: 0%; /* 初期値は0% */
    }
    .progress_text {
        display: none; /* 最初は非表示 */
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        font-size: 2em;
    }
    ul{
        max-width: 500px; margin: 0 auto;
    }
    *{
        list-style: none
    }
    ul img{
        width: 100%
    }
</style>

JavaScript

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const images = document.querySelectorAll('img'); // ページ内の全画像を取得
        const totalImages = images.length;
        let loadedImages = 0;
    
        const progressBar = document.getElementById('progress_bar_count');
        const countElement = document.getElementById('count');
        const loadingWrapper = document.getElementById('loadingWrapper');
        const mainContent = document.getElementById('mainContent');
    
        function updateProgress() {
            loadedImages++;
            const percentComplete = Math.round((loadedImages / totalImages) * 100);
            progressBar.style.width = percentComplete + '%';
            countElement.textContent = percentComplete;
    
            // すべての画像が読み込まれたら
            if (loadedImages === totalImages) {
                setTimeout(function() {
                    loadingWrapper.style.opacity = '0';
                    setTimeout(function() {
                        loadingWrapper.style.display = 'none';
                        mainContent.style.display = 'block'; // メインコンテンツを表示
                    }, 300); // フェードアウトのための遅延
                }, 500); // 少しの遅延を加える
            }
        }
    
        // 各画像の読み込み完了を監視
        images.forEach(function(image) {
            if (image.complete) {
                updateProgress(); // 既に読み込まれている場合もカウント
            } else {
                image.addEventListener('load', updateProgress);
                image.addEventListener('error', updateProgress); // エラー時もカウント
            }
        });
    });
</script>

コードの解説

HTMLとCSSは割愛します。
『 document.addEventListener(‘DOMContentLoaded’, function() {}』で画像の読み込みなどが終わる前に処理を実行します。

document.addEventListener('DOMContentLoaded', function() { }

まず、読み込みに時間のかかる画像の要素を取得、配列に格納、処理を実行する際に必要となる要素をID名から取得していきます。

const images = document.querySelectorAll('img'); // ページ内の全画像を取得
const totalImages = images.length;
let loadedImages = 0;
        
const progressBar = document.getElementById('progress_bar_count');
const countElement = document.getElementById('count');
const loadingWrapper = document.getElementById('loadingWrapper');
const mainContent = document.getElementById('mainContent');

画像の読み込みをカウントしていきます.

『images.forEach()』で取得した画像データを処理していきます。
『if (image.complete){}』、○○○.completeでは画像の読み込みが成功しているかどうかを判断します。『updateProgress()』で関数へと処理を流していきます。

// 各画像の読み込み完了を監視
images.forEach(function(image) {
    if (image.complete) {
        updateProgress(); // 既に読み込まれている場合もカウント
    } else {
        image.addEventListener('load', updateProgress);
        image.addEventListener('error', updateProgress); // エラー時もカウント
    }
});

『loadedImages++;』ロードされた画像をカウントアップします。
現在読み込みしている画像の枚数をパーセントで取得します。
プログレスバーに%で挿入、テキストに数値で挿入しています。

loadedImages++;
const percentComplete = Math.round((loadedImages / totalImages) * 100);
progressBar.style.width = percentComplete + '%';
countElement.textContent = percentComplete;

全て読み込みが終わったら、それぞれスタイルを指定して表示させます。
クラス名を付与させるようにすればもっと派手な動きも可能です。

// すべての画像が読み込まれたら
if (loadedImages === totalImages) {
    setTimeout(function() {
        loadingWrapper.style.opacity = '0';
        setTimeout(function() {
            loadingWrapper.style.display = 'none';
            mainContent.style.display = 'block'; // メインコンテンツを表示
        }, 300); // フェードアウトのための遅延
    }, 500); // 少しの遅延を加える
}

まとめ

以上、『JavaScriptでローディングの進捗をパーセント、プログレスバーで表示する』でした。
でもの動きはシンプルですが読み込み時にクラスを付与してあげれば派手な動きも可能です。
ユーザービリティの向上やブランディングの観点からもローディング画面を設置すことも多いのでぜひ、参考にしてみてください。