429

プロトタイプでは、次のコードで「読み込み中...」の画像を表示できます。

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

function showLoad () {
    ...
}

jQueryでは、次のようにしてサーバー ページを要素に読み込むことができます。

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

しかし、Prototype で行ったように、このコマンドにロード スピナーを追加するにはどうすればよいでしょうか?

4

24 に答える 24

821

いくつかの方法があります。私の好みの方法は、要素自体の 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();
  });
于 2008-09-16T01:21:26.487 に答える
229

私が使用するjQueryの場合

jQuery.ajaxSetup({
  beforeSend: function() {
     $('#loader').show();
  },
  complete: function(){
     $('#loader').hide();
  },
  success: function() {}
});
于 2010-03-05T15:12:31.163 に答える
56

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();
    }
});

任意の Spinning Gif 画像を使用できます。これは、配色に応じて優れた AJAX ローダー ジェネレーターである Web サイトです: http://ajaxload.info/

于 2012-08-30T05:37:28.507 に答える
25

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

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

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

幸運を!

于 2008-09-16T01:28:12.460 に答える
24

使用している場合は$.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'
});

設定の名前は「beforeSend」ですが、jQuery 1.5 以降では、リクエスト タイプに関係なく「beforeSend」が呼び出されます。つまり、.show()関数は次の場合に呼び出されますtype: 'GET'

于 2013-06-05T11:09:43.653 に答える
21
$('#message').load('index.php?pg=ajaxFlashcard', null, showResponse);
showLoad();

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

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

于 2008-09-16T01:23:33.410 に答える
11

ロードプラグインを使用します:http: //plugins.jquery.com/project/loading

$.loading.onAjax({img:'loading.gif'});
于 2009-07-29T16:16:14.657 に答える
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();
    })
于 2013-04-02T11:48:48.443 に答える
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() {}
});
于 2011-05-02T22:41:38.360 に答える
8

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

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

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

span タグを image タグに置き換えることもできます。

于 2011-09-12T14:26:31.683 に答える
7

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;  
}
于 2012-09-04T16:51:37.173 に答える
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                
        }
    });
于 2014-10-23T07:20:30.977 に答える
2

私はjQueryUIダイアログで以下を使用しました。(多分それは他のajaxコールバックで動作しますか?)

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

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

于 2011-12-02T17:55:44.740 に答える
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; }
于 2008-10-26T20:23:40.450 に答える
2

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

于 2016-12-06T16:39:58.443 に答える
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);
                        }
             });
于 2011-09-29T12:46:35.610 に答える
1

独自のコードを書きたくない場合は、それを行うプラグインもたくさんあります。

于 2013-04-09T16:08:17.840 に答える
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);
};
于 2012-07-12T15:12:40.837 に答える
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>

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

于 2018-06-04T10:44:43.280 に答える