4

読み込み中の画像やメッセージをユーザーに表示するにはどうすればよいですか？可能であれば、背景が灰色で薄暗いフルスクリーンにする方法を教えてください。いくつかのギャラリーから大きな写真を見るときのようなものです（申し訳ありませんが、リンクの例はありません）。

現在、画像やその他のフォーマットを持つCSSクラスを追加していますが、何らかの理由で機能しません。検索の結果はdivに挿入されます。

HTML

<div id="searchresults"></div>

CSS

div.loading {
  background-image: url('../img/loading.gif'); 
  background-position: center;
  width: 80px;
  height: 80px;
}

JS

$(document).ready(function(){
  $('#searchform').submit(function(){
    $('#searchresults').addClass('loading');
    $.post('search.php', $('#'+this.id).serialize(),function(result){
      $('#searchresults').html(result);
    });
    $('#searchresults').removeClass('loading');
    return false;
  });
});
4

2 に答える 2

2

問題は、removeClass('loading')ajax呼び出しが終了した後ではなく、発行した直後に呼び出していることです。

あなたはremoveClass('loading')ajaxコールバックで行うことができます。コールバック$.postのみを提供できます：success

jQuery.post( url, [ data ], [ success(data, textStatus, XMLHttpRequest) ], [ dataType ] )

また、読み込み中の画像は、成功または失敗のいずれの場合でも削除する必要があるため、次completeのコールバックを使用することをお勧めし$.ajax()ます。

$('#searchform').submit(function(){
  $('#searchresults').addClass('loading');

  $.ajax({
    type: 'POST',
    url: 'search.php',
    data:  $('#'+this.id).serialize(),
    success: function(result){
      $('#searchresults').html(result);
    },
    complete: function() {
      $('#searchresults').removeClass('loading');
    }
  });
  return false;
});

$ .ajax（）ドキュメントの「コールバック関数」セクションでコールバックの詳細を参照してください

于 2010-05-27T08:49:39.040 に答える
0

これを試して：

    $("#contentLoading").ajaxSend(function(r, s) {
        $(this).show();
        $("#ready").hide();
    });

    $("#contentLoading").ajaxStop(function(r, s) {
        $(this).hide();
        $("#ready").show();
    });

これにより、ajax を開始すると#contentLoading進行状況が表示されgif、ajax が停止すると非表示になります。

于 2010-05-27T14:55:11.860 に答える