jQuery でローディング画面を実装する方法

このドキュメントでは、jQuery を使用してローディング画面を簡単に作成する方法を、サンプルコードと合わせて詳しく解説します。

1. ローディング画像の準備

ローディング画面に表示する画像を用意しましょう。今回は、ローディング画像生成サイト Loader Generator を使用します。

Loader Generator (https://loading.io/) にアクセスします。

ローディングのタイプ、色、サイズなど、好みの設定を選びます。

"Download GIF" ボタンをクリックして、生成された GIF 画像をダウンロードします。

2. コーディング

2.1 jQuery の読み込み

HTML ファイルの <head> タグ内に、jQuery 本体の読み込みを記述します。

`<script src="https://code.jquery.com/jquery-3.6.0.js"></script>`

2.2 ローディング画面の HTML

ローディング画面の HTML を記述します。今回は、loading_box という ID を持つ <div> 要素と、ローディング画像を表示する <img> 要素を使用します。

<div id="loading_box" style="display: none;">
  <img src="gif-load.gif" alt="Loading..."> 
</div>

style="display: none;" を指定することで、初期状態ではローディング画面は非表示になります。

2.3 ローディング画面を表示・非表示する JavaScript 関数

ローディング画面を表示・非表示する JavaScript 関数を作成します。

// ローディング表示
function showLoading() {
    $('#loading_box').show();
}

// 表示したローディングを消す
function hideLoading() {
    $('#loading_box').hide();
}

showLoading() 関数は、#loading_box 要素の show() メソッドを呼び出すことで、ローディング画面を表示します。
hideLoading() 関数は、#loading_box 要素の hide() メソッドを呼び出すことで、ローディング画面を非表示にします。

2.4 CSS によるローディング画面のスタイリング

ローディング画面を画面全体に表示し、ローディング画像を中央に配置するための CSS を記述します。

/* ローディング画面全体 */
#loading_box {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8); /* 半透明の白背景 */
    position: fixed; /* 画面に固定 */
    top: 0;
    left: 0;
    z-index: 1000; /* 最前面に表示 */
    display: flex; /* 中央配置のために flexbox を使用 */
    justify-content: center; /* 水平方向中央揃え */
    align-items: center; /* 垂直方向中央揃え */
}

/* ローディング画像 */
#loading_box img {
    width: 80px; /* 画像サイズを調整 */
}

3. Ajax と組み合わせる

Ajax リクエストを送信する際にローディング画面を表示し、リクエストが完了したら非表示にする例を紹介します。

$(function () {
    // ボタンクリック時の処理
    $('#ajax_button').on('click', function() {
        // ローディング画面を表示
        showLoading();

        // Ajax リクエスト
        $.ajax({
            url: 'your_api_endpoint',
            type: 'GET',
            dataType: 'json',
            success: function(data) {
                // リクエスト成功時の処理
                console.log(data);
            },
            error: function(error) {
                // リクエスト失敗時の処理
                console.error(error);
            },
            complete: function() {
                // リクエスト完了時の処理 (成功・失敗に関わらず実行)
                hideLoading(); 
            }
        });
    });
});

// ローディング表示
function showLoading() {
    $('#loading_box').show();
}

// 表示したローディングを消す
function hideLoading() {
    $('#loading_box').hide();
}

$.ajax() の complete コールバック関数内で hideLoading() を呼び出すことで、リクエストの成否に関わらずローディング画面を非表示にしています。

4. まとめ

jQuery を使用することで、シンプルなローディング画面を簡単に実装できます。
Ajax リクエストと組み合わせることで、ユーザーに処理の進捗状況を分かりやすく伝え、より良いユーザーエクスペリエンスを提供することができます。