【プラグイン不要】ローディングをjQueryで簡単に自作する

Ajaxを使っているとローディング画面を表示したくなることがあります。

ローディングを表示するプラグインは多数ありますが、
「容量デカいし、こんなに高機能なのいらねぇよ」
と突っ込みたくなることも。

今回はjQueryを使って簡単にローディング画面を作る方法を紹介します。

Loader Generatorでローディング画像をゲットする

まずはローディング時に表示するローディング画像をゲットします。
今回はローディング画像を生成できる　Loader Generator　を利用。

ローディングの種類・色・サイズを設定して「DOWNLOAD GIF」をクリックします。

コーディング

まずはjquery本体を読み込みます。

<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>

続いて、ローディングを表示するスクリプトと非表示にするスクリプトを記述します。

// ローディング表示
function showLoading() {
    $('body').append('<div id="loading_box"><img src="gif-load.gif"></div>');
}

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

showLoading()を実行すると、bodyの末尾に<div id=”loading_box”><img src=”gif-load.gif”></div>が追記されます。
このHTMLがローディング画面になります。

このままだと画面の下のほうにしかローディングが表示されません。

CSSでローディングを画面前面の全体に表示するように設定します。

/* 画面前面の全体に表示 */
#loading_box {
    width: 100%;
    height: 100%;
    background: #FFF;
    opacity: 0.8;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}

/* 画面の中心にローディング画像を表示する */
#loading_box img {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -40px 0 0 -40px;
    width: auto;
}

これでローディング画面を使えるようになりました。

実際に組み込んでみる

以前つくった郵便番号検索にローディング画面を組み込んでみましょう。

$(function () {
    //検索ボタンをクリックされたときに実行
    $("#search_btn").click(function () {
        //入力値をセット
        var param = {zipcode: $('#zipcode').val()}
        //zipcloudのAPIのURL
        var send_url = "http://zipcloud.ibsnet.co.jp/api/search";
        //ローディング画面表示
        showLoading();
        $.ajax({
            type: "GET",
            cache: false,
            data: param,
            url: send_url,
            dataType: "jsonp",
            success: function (res) {
                //結果によって処理を振り分ける
                if (res.status == 200) {
                    //処理が成功したとき
                    //該当する住所を表示
                    var html = '';
                    for (var i = 0; i < res.results.length; i++) {
                        var result = res.results[i];
                        console.log(res.results);
                        html += '<h2>住所' + (i + 1) + '</h2>';
                        html += '<div>都道府県コード：' + result.prefcode + '</div>';
                        html += '<div>都道府県：' + result.address1 + '</div>';
                        html += '<div>市区町村：' + result.address2 + '</div>';
                        html += '<div>町域：' + result.address3 + '</div>';
                        html += '<div>都道府県(カナ)：' + result.kana1 + '</div>';
                        html += '<div>市区町村(カナ)：' + result.kana1 + '</div>';
                        html += '<div>町域(カナ)：' + result.kana1 + '</div>';
                    }
                    $('#zip_result').html(html);
                } else {
                    //エラーだった時
                    //エラー内容を表示
                    $('#zip_result').html(res.message);
 
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                console.log(XMLHttpRequest);
            },
            complete:function(){
                 //ローディングを消す
                 hideLoading();
            }
        });
    });
});
// ローディング表示
function showLoading() {
    $('body').append('<div id="loading_box"><img src="gif-load.gif"></div>');
}

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

[btn class=”rich_pink”]デモ確認[/btn]