jQueryでスピナーの読み込みを表示する方法は?


412

プロトタイプ私はこのコードで「ロード...」の画像を表示することができます。

var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars, 
onLoading: showLoad, onComplete: showResponse} );

function showLoad () {
    ...
}

jQueryの、私はこれを持つ要素に、サーバ・ページをロードすることができます。

$('#message').load('index.php?pg=ajaxFlashcard');

しかし、プロトタイプで行ったように、このコマンドにローディングスピナーをどのようにアタッチしますか?

回答:


793

いくつかの方法があります。私が好む方法は、要素自体のajaxStart / Stopイベントに関数をアタッチすることです。

$('#loadingDiv')
    .hide()  // Hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    })
;

ajaxStart / Stop関数は、Ajax呼び出しを行うたびに発生します。

更新:jQuery 1.8以降、ドキュメントに.ajaxStart/Stopはにのみアタッチする必要があると記載されていdocumentます。これにより、上記のスニペットが次のように変換されます。

var $loading = $('#loadingDiv').hide();
$(document)
  .ajaxStart(function () {
    $loading.show();
  })
  .ajaxStop(function () {
    $loading.hide();
  });

48
これはおそらく、DIVへの1つの単純なロードにはグローバルすぎます。
モントリオール09/07/29

363
グローバルすぎる?「お待ちください」メッセージがいくつ必要ですか?
nickf 2009

23
この方法では、モーダルの読み込みウィンドウだけを表示したくない場合に、divの読み込み位置を制御できませんが、ajaxコンテンツが読み込まれるのを待っている要素の近くに表示します...
glaz666

10
あなたがそれらを名前空間できるようajaxStartとajaxStopはjQueryのイベントです:stackoverflow.com/questions/1191485/...の docs.jquery.com/Namespaced_Events
デヴィッド・夏

10
jQuery> = 1.9を使用している場合は、ajaxStartおよびajaxStopイベントを$(document)に添付します。jquery.com/upgrade-guide/1.9/…–
Domenic

213

私が使用するjQueryの場合

jQuery.ajaxSetup({
  beforeSend: function() {
     $('#loader').show();
  },
  complete: function(){
     $('#loader').hide();
  },
  success: function() {}
});

13
私にとってはうまくいき、htmlは次のようになります:<div id = 'loader'> <img src = "spinner.gif" /> </ div>
yigal

7
これは私にとって最もきれいでした。代わりにajaxSetup、私はbeforeSendを置い:完全な:$アヤックス({...文の中。
kenswdev

4
何が価値があるのか​​わからないが、jQueryはそのドキュメントで.ajaxSetup()の使用は推奨されないことを述べています。リンク
PEC

beforeSendこれajaxStartはすべての呼び出しの前に呼び出されますが、最初の ajaxメソッドが呼び出されたときにのみトリガーされることに注意してください。同様にajaxStop最後の ajax呼び出しが終了すると呼び出されます。複数の同時リクエストがある場合、この回答のスニペットは正しく機能しません。
nickf 2013年

ajax呼び出しがタイムアウトになった場合は機能しません(Macの場合はFirefox 28)。
osa 14

48

jQueryの.ajax関数とそのオプションを使用してbeforeSend、ローダーdivのようなものを表示できる関数を定義し、成功した場合はローダーdivを非表示にすることができます。

jQuery.ajax({
    type: "POST",
    url: 'YOU_URL_TO_WHICH_DATA_SEND',
    data:'YOUR_DATA_TO_SEND',
    beforeSend: function() {
        $("#loaderDiv").show();
    },
    success: function(data) {
        $("#loaderDiv").hide();
    }
});

任意のスピニングGif画像を使用できます。ここにあなたの配色に応じて素晴らしいAJAXローダージェネレーターであるウェブサイトがあります:http : //ajaxload.info/


16
successエラーが発生した場合に呼び出されませんが、「あなたは常に受信しますcompleteによると、でも同期要求のために、コールバックを」jQueryのAjaxのイベント
LeeGee

23

AJAX呼び出しの直前にアニメーション画像をDOMに挿入し、インライン関数を実行してそれを削除できます...

$("#myDiv").html('<img src="images/spinner.gif" alt="Wait" />');
$('#message').load('index.php?pg=ajaxFlashcard', null, function() {
  $("#myDiv").html('');
});

これにより、後続のリクエストでアニメーションが同じフレームで開始することが保証されます(重要な場合)。IEの古いバージョンはアニメーションに問題があるかもしれないことに注意してください。

幸運を!


13
ヒント:displayをnoneに設定して、diverにspinner.gifをプリロードします。そうしないと、スピナーがまだダウンロードされているため、スピナー効果が少し遅れる可能性があります。
uriDium

素敵なヒント、他の人のプラグインを使用するよりもはるかに簡単
Gordon Thompson

いいね!でも、ページが既に読み込まれている場合でも、スピナーを2秒間表示したいのです。
両方のFM

5
@BothFM人々は物事を待つのを楽しむので...?
Josh Stodola

21
$('#message').load('index.php?pg=ajaxFlashcard', null, showResponse);
showLoad();

function showResponse() {
    hideLoad();
    ...
}

http://docs.jquery.com/Ajax/load#urldatacallback


そこにタイミングの問題があるかもしれませんね。
TimBüthe11年

2
@UltimateBrent間違いだと思います。showLoad()がコールバックではないのはなぜですか?JavaScriptは非同期でコンテンツを読み込みます。showLoad()は、コンテンツがロードされる前でも、正しく機能します。
Jaseem

2
@Jaseem私も同様の方法を使用しており、実際には非同期呼び出しに依存しています。私はshowLoadをajax呼び出しの前のどこかに配置しますが、要はスピナーを表示し、JSに呼び出しを開始させ、AJAXが完了した後、コールバックでスピナーを強制終了することです。
Nenotlep

17

使用している$.ajax()場合は、次のようなものを使用できます。

$.ajax({
        url: "destination url",
        success: sdialog,
        error: edialog,
        // shows the loader element before sending.
        beforeSend: function () { $("#imgSpinner1").show(); },
        // hides the loader after completion of request, whether successfull or failor.             
        complete: function () { $("#imgSpinner1").hide(); },             
        type: 'POST', dataType: 'json'
    });  

11

読み込みプラグインを使用する:http : //plugins.jquery.com/project/loading

$.loading.onAjax({img:'loading.gif'});

10
この単純なタスクのための1つのプラグイン?それは本当に良い解決策ではありませんか?ページに100スクリプトをロードしたいのは誰ですか?
Jaseem 2011

2
同意した。パフォーマンスを向上させたい場合は、圧縮して連結します。
Nathan Bubna

9
意見の相違:作業を維持し、他の人にも維持してもらいたい場合は、コードを個別にモジュール化して再利用します。ユーザーがクライアントとプラグインだけでなくコードもロードできないような接続を確立している可能性はどのくらいありますか?
LeeGee

@NathanBubnaリンクは機能していません
SpringLearner 2016

「ユーザーのクライアントがプラグインだけでなくコードもロードできないほど接続が不安定になる可能性はありますか?」かなり良いと思います。
アンドリューオクセンブルグ2018年

9

バリエーション:メインページの左上にid = "logo"のアイコンがあります。ajaxが動作しているときは、スピナーgifが上に(透明度付きで)オーバーレイされます。

jQuery.ajaxSetup({
  beforeSend: function() {
     $('#logo').css('background', 'url(images/ajax-loader.gif) no-repeat')
  },
  complete: function(){
     $('#logo').css('background', 'none')
  },
  success: function() {}
});

9

元の返信に 2つの変更が加えられました。

  1. jQuery 1.8以降では、ajaxStartとajaxStopはにのみアタッチする必要がありdocumentます。これにより、一部のajaxリクエストのみをフィルタリングすることが難しくなります。スー...
  2. ajaxSendajaxCompleteに切り替えると、スピナーを表示する前に現在のajaxリクエストを監視できます。

これは、これらの変更後のコードです。

$(document)
    .hide()  // hide it initially
    .ajaxSend(function(event, jqxhr, settings) {
        if (settings.url !== "ajax/request.php") return;
        $(".spinner").show();
    })
    .ajaxComplete(function(event, jqxhr, settings) {
        if (settings.url !== "ajax/request.php") return;
        $(".spinner").hide();
    })

素晴らしい回避策。ajaxComplete要求が再試行するとき、私はの組み合わせを使用しましたので、途中で発射するようだajaxSendajaxStop、それは素晴らしい作品。
Mahn

@SchweizerSchoggi:その質問に答える他のトピックがあります。検索を使用してください!
EmilStenström15年

8

私もこの回答に貢献したいと思います。私はjQueryで同様のものを探していましたが、これを最終的に使用しました。

ロードスピナーをhttp://ajaxload.info/から入手しました。私の解決策は、http://christierney.com/2011/03/23/global-ajax-loading-spinners/にあるこの簡単な回答に基づいています

基本的に、HTMLマークアップとCSSは次のようになります。

<style>
     #ajaxSpinnerImage {
          display: none;
     }
</style>

<div id="ajaxSpinnerContainer">
     <img src="~/Content/ajax-loader.gif" id="ajaxSpinnerImage" title="working..." />
</div>

そして、jQueryのコードは次のようになります。

<script>
     $(document).ready(function () {
          $(document)
          .ajaxStart(function () {
               $("#ajaxSpinnerImage").show();
          })
          .ajaxStop(function () {
               $("#ajaxSpinnerImage").hide();
          });

          var owmAPI = "http://api.openweathermap.org/data/2.5/weather?q=London,uk&APPID=YourAppID";
          $.getJSON(owmAPI)
          .done(function (data) {
               alert(data.coord.lon);
          })
          .fail(function () {
               alert('error');
          });
     });
</script>

それはそれと同じくらい簡単です:)


8

ローダーイメージを、後でAjax呼び出しを使用してコンテンツをロードするのと同じタグに割り当てるだけです。

$("#message").html('<span>Loading...</span>');

$('#message').load('index.php?pg=ajaxFlashcard');

また、spanタグをイメージタグに置き換えることもできます。


1
この方法でUIを管理することは困難です。「読み込み中」のテキストと最終メッセージには、まったく異なるスタイルが必要になる場合があります。この問題を処理するために、上記のコールバックメソッドを使用できます
Jaseem

6

ajaxイベントのグローバルデフォルトを設定するだけでなく、特定の要素の動作を設定できます。おそらく、クラスを変更するだけで十分でしょうか?

$('#myForm').ajaxSend( function() {
    $(this).addClass('loading');
});
$('#myForm').ajaxComplete( function(){
    $(this).removeClass('loading');
});

CSSの例、#myFormをスピナーで非表示にする:

.loading {
    display: block;
    background: url(spinner.gif) no-repeat center middle;
    width: 124px;
    height: 124px;
    margin: 0 auto;
}
/* Hide all the children of the 'loading' element */
.loading * {
    display: none;  
}

1
これは私の見解では選択された答えになるはずです。@LeeGeeに感謝します。
Nam G VU 2016年

本当にすばらしい答え
Raskolnikov

4

スピナーが機能するためには非同期呼び出しを使用する必要があることに注意してください(少なくとも、それがajax呼び出しの後まで表示されず、呼び出しが終了してスピナーを削除したため、すぐに消えました)。

$.ajax({
        url: requestUrl,
        data: data,
        dataType: 'JSON',
        processData: false,
        type: requestMethod,
        async: true,                         <<<<<<------ set async to true
        accepts: 'application/json',
        contentType: 'application/json',
        success: function (restResponse) {
            // something here
        },
        error: function (restResponse) {
            // something here                
        }
    });

4
$('#loading-image').html('<img src="/images/ajax-loader.gif"> Sending...');

        $.ajax({
            url:  uri,
            cache: false,
            success: function(){
                $('#loading-image').html('');           
            },

           error:   function(jqXHR, textStatus, errorThrown) {
            var text =  "Error has occured when submitting the job: "+jqXHR.status+ " Contact IT dept";
           $('#loading-image').html('<span style="color:red">'+text +'  </span>');

            }
        });

最短の方法は、背景が透明なajaxload.infoからダウンロードした画像を含む画像タグを挿入することです
Izabela Skibinska

2

jQuery UI Dialogで以下を使用しました。(多分それは他のajaxコールバックで動作しますか?)

$('<div><img src="/i/loading.gif" id="loading" /></div>').load('/ajax.html').dialog({
    height: 300,
    width: 600,
    title: 'Wait for it...'
});

には、ajax呼び出しが完了したときにコンテンツが置き換えられるまで、アニメーション化された読み込みgifが含まれています。


2

これは私にとって最良の方法です:

jQuery

$(document).ajaxStart(function() {
  $(".loading").show();
});

$(document).ajaxStop(function() {
  $(".loading").hide();
});

コーヒー

  $(document).ajaxStart ->
    $(".loading").show()

  $(document).ajaxStop ->
    $(".loading").hide()

ドキュメント:ajaxStartajaxStop


そうです。必要に応じて、この回答に記載されているプラ​​グインと一緒に使用できます...
Matt

2

JavaScript

$.listen('click', '#captcha', function() {
    $('#captcha-block').html('<div id="loading" style="width: 70px; height: 40px; display: inline-block;" />');
    $.get("/captcha/new", null, function(data) {
        $('#captcha-block').html(data);
    }); 
    return false;
});

CSS

#loading { background: url(/image/loading.gif) no-repeat center; }

2

これはその特定の目的のための非常にシンプルでスマートなプラグインです:https : //github.com/hekigan/is-loading


すごくいい!特に、デモを見る場合... DOM要素を無効にする、タグ内、フルオーバーレイ、要素オーバーレイ...は、必要なすべてを提供します。また、フルオーバーレイとこの回答を簡単に組み合わせて、即座に機能させることができます。
マット

1

私はこれをします:

var preloaderdiv = '<div class="thumbs_preloader">Loading...</div>';
           $('#detail_thumbnails').html(preloaderdiv);
             $.ajax({
                        async:true,
                        url:'./Ajaxification/getRandomUser?top='+ $(sender).css('top') +'&lef='+ $(sender).css('left'),
                        success:function(data){
                            $('#detail_thumbnails').html(data);
                        }
             });

1

私はあなたが正しいと思います。このメソッドはグローバルすぎます...

ただし、これは、AJAX呼び出しがページ自体に影響を与えない場合に適したデフォルトです。(たとえば、バックグラウンド保存)。(「global」:falseを渡すことで、特定のajax呼び出しに対していつでもオフに切り替えることができます-jqueryのドキュメントを参照してください

AJAX呼び出しがページの一部を更新することを目的としている場合、私は「ロード」イメージを更新されたセクションに固有にするのが好きです。どの部分がリフレッシュされるのか知りたいです。

あなたが単に次のようなものを書くことができたらそれがどれほどクールであるか想像してください:

$("#component_to_refresh").ajax( { ... } ); 

そして、これはこのセクションの「読み込み」を示します。以下は、「読み込み」表示も処理する私が作成した関数ですが、それはajaxで更新している領域に固有のものです。

まず、使い方をご紹介します

<!-- assume you have this HTML and you would like to refresh 
      it / load the content with ajax -->

<span id="email" name="name" class="ajax-loading">
</span>

<!-- then you have the following javascript --> 

$(document).ready(function(){
     $("#email").ajax({'url':"/my/url", load:true, global:false});
 })

そして、これは機能です-あなたが望むようにあなたが強化することができる基本的なスタートです。それは非常に柔軟です。

jQuery.fn.ajax = function(options)
{
    var $this = $(this);
    debugger;
    function invokeFunc(func, arguments)
    {
        if ( typeof(func) == "function")
        {
            func( arguments ) ;
        }
    }

    function _think( obj, think )
    {
        if ( think )
        {
            obj.html('<div class="loading" style="background: url(/public/images/loading_1.gif) no-repeat; display:inline-block; width:70px; height:30px; padding-left:25px;"> Loading ... </div>');
        }
        else
        {
            obj.find(".loading").hide();
        }
    }

    function makeMeThink( think )
    {
        if ( $this.is(".ajax-loading") )
        {
            _think($this,think);
        }
        else
        {
            _think($this, think);
        }
    }

    options = $.extend({}, options); // make options not null - ridiculous, but still.
    // read more about ajax events
    var newoptions = $.extend({
        beforeSend: function()
        {
            invokeFunc(options.beforeSend, null);
            makeMeThink(true);
        },

        complete: function()
        {
            invokeFunc(options.complete);
            makeMeThink(false);
        },
        success:function(result)
        {
            invokeFunc(options.success);
            if ( options.load )
            {
                $this.html(result);
            }
        }

    }, options);

    $.ajax(newoptions);
};


1

サーバーリクエストを行うたびにローダーを使用する場合は、次のパターンを使用できます。

 jTarget.ajaxloader(); // (re)start the loader
 $.post('/libs/jajaxloader/demo/service/service.php', function (content) {
     jTarget.append(content); // or do something with the content
 })
 .always(function () {
     jTarget.ajaxloader("stop");
 });

このコードは特に、jajaxloaderプラグイン(先ほど作成したもの)を使用しています

https://github.com/lingtalfi/JAjaxLoader/


1

私のajaxコードは次のようになり、実際にはasync:false行をコメントアウトしただけで、スピナーが表示されます。

$.ajax({
        url: "@Url.Action("MyJsonAction", "Home")",
        type: "POST",
        dataType: "json",
        data: {parameter:variable},
        //async: false, 

        error: function () {
        },

        success: function (data) {
          if (Object.keys(data).length > 0) {
          //use data 
          }
          $('#ajaxspinner').hide();
        }
      });

私はajaxコードの前に関数内のスピナーを示しています:

$("#MyDropDownID").change(function () {
        $('#ajaxspinner').show();

HTMLの場合、私はフォントの素晴らしいクラスを使用しました:

<i id="ajaxspinner" class="fas fa-spinner fa-spin fa-3x fa-fw" style="display:none"></i>

それが誰かを助けることを願っています。


0

あなたは常にあなたのためにすべてを行うUI UI jQueryプラグインブロックすることができます、そしてそれはajaxがロードしている間、どんな入力のページもブロックします。プラグインが機能していないように見える場合は、この回答でプラグインを使用する正しい方法について読むことができます見てみな。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.