FC2ブログ

Ajax 処理中画像を表示させる

Webで要求に対して応答がなかなか返ってこない場合、ユーザに処理を行っていることを表す画像(グルグル回っている画像?)を表示しているのを良く見かけます。これを実装したく調べて、実装してみました。
MVC002.png
「画面の上に画像をどのように表示しているのか?」というのが疑問だったので調べたところ、Divタグの表示位置を絶対位置で指定することによってレイヤのような効果を実現しているとのことでした。
あと処理画像の表示は非同期処理前に、処理画像の非表示は非同期処理完了で行えば良いです。プログラムで確認してください。

処理中の画像は、Loader Generatorというサイトで自分好みにカスタマイズしたgifファイルをダウンロードし、ダウンロードしたファイルをプロジェクトファイルの「/Img/load.gif」に置きました。
MVC003.png

■プログラム(※ソースの修正はjavascriptのみとなります)
・Scripts/Home.js
//=============================================================================
// Home/Indexが読み込まれたときに実行
//=============================================================================
$(function () {

    //-------------------------------------------------------------------------
    // 各[送信]ボタンに押下された時の処理を設定する
    //-------------------------------------------------------------------------
    var Row = $("#text_row_num").val();
    var Col = $("#text_col_num").val();
    for (i = 0; i < Row; i++) {
        for (j = 0; j < Col; j++) {
            var Number = i * Col + j;
            var btnId = "#btn_" + Number;

            $(btnId).click(function () { BtnClickProc(this); });
        }
    }
});



//=============================================================================
// [送信]ボタンが押された時の処理
//=============================================================================
function BtnClickProc( btn ) {

    var btnId = btn.id;
    var Number = btnId.substring( btnId.lastIndexOf("_")+1,btn.length);
    var textId = "#txt_" + Number;
    var InputData = $(textId).val();
    var Row = $("#text_row_num").val();
    var Col = $("#text_col_num").val();
    var DataNum = Row * Col;

    var data = { iData: InputData, iTextBoxNum: DataNum };

    // 処理中画像を表示
    ShowProcImage();

    // 非同期通信
    $.ajax({
        url: 'Home/ReqSend',
        type: 'POST',
        data: data,
        dataType: 'json',
        error: function (XmlHttpRequest, textStatus, errorThrown) {
            var msg = "エラー\n textStatus:" + textStatus + "\n errorThrown:" + errorThrown;
            alert(msg);
        },
        success: function (data, dataType) {
            RequestResult(data);
        },
        complete: function (data) {
            // 処理中を消す
            HedeProcImage();
        }
    });
}


//=============================================================================
// リクエストの応答が返ってきたときの処理
//=============================================================================
function RequestResult(data) {

    for ( i = 0 ; i < data.length ; i++ )
    {
        var textId = "#txt_" + i;
        var color = "#" + data[i].iColor.toString(16);
        
        $( textId ).val( data[i].iData );
        $(textId).css("background-color", color);
    }
}


//=============================================================================
// 処理中画像を画面の真ん中に表示させる
//=============================================================================
function ShowProcImage() {

    // 指定された画像を読込みサイズを取得
    var img = new Image();
    img.src = "Img/load.gif";

    // 中央に出すための計算
    var left = Math.floor(($(window).width() - img.width) / 2);
    var top = Math.floor(($(window).height() - img.height) / 2) + $(window).scrollTop();

    // 表示
    $(document.body).append( "
" ); $("#loading").append( img ); } //============================================================================= // 処理中画像を画面を消す //============================================================================= function HedeProcImage() { $("#loading").remove(); }
スポンサーサイト



この記事へのコメント

トラックバック

URL :

プロフィール

MIBC

Author:MIBC
ブログに掲載している配線図・プログラムを使用しても良いですが、障害が発生しても一切責任を負いません。ご了承よろしくお願いします。

■お願い■
予想を反して色々な方がこのホームページを見にこられるようになってきております。
もし参考になった記事がありましたら、拍手ボタンを押していただけるとどの様な記事が良かったかの資料となったり、今後の励みになったりします。
お手数ですが参考になった記事がありましたら、参考になった記事の一番最後にあります拍手ボタンを押していただけると助かります。よろしくお願いします。

アクセスカウンター
Revolver Map
AdMax
カテゴリ
リンク