0

より多くの結果を取得し、同じページ内の既存の結果に追加するために ajax 呼び出しを行っています。コンテンツがフェッチされている間、リクエストが送信されるたびにスクロール スピナーを表示する必要があります。これを達成するために、次のようにフェッチされた結果の下部に div を追加します。

<div class="loader" style="display:block"></div>

そして、以下のコードを使用してスピナーを表示しようとしています:

beforeSend: function() 
{
      $('#loader:last-child').html('<img src="/graphics/loading.gif" alt="Wait" />');
}
complete: function()
{
      $('#loader:last-child').html('');
}

しかし、スピナー効果を得ることができません。ページにはまったく表示されません(結果はフェッチされます)。

それを修正するのを手伝ってください。スピナー効果を持つ他の考えも高く評価されています。

編集: perl コードに含まれていたので、引用符を削除しました。そのために残念。

4

7 に答える 7

2

スペースを入れ<imgsrcて<img src

$('.loader:last-child')ローダーはIDではなくクラスであるため、セレクターはそうあるべきです。(.の代わりに使用#)

于 2012-09-05T05:42:38.460 に答える
1

新しい要素や画像を追加する代わりに、読み込み中に結果のコンテナーにクラスを追加し、そのクラスを使用してパディングとスピナー グラフィックをコンテナーの背景画像として追加することができます。読み込みが完了したら、クラスを削除します。

beforeSend: function(){
    $('#resultsContainer').addClass('loading');
}
complete: function(){
    $('#resultsContainer').removeClass('loading');
}

次に、CSS は次のようになります。

#resultsContainer.loading {
    background: url(graphics/loading.gif) no-repeat center bottom;
    padding-bottom: 2em;
}

スタイルを追加するには、resultContainer の padding-bottom にトランジションを追加して、読み込み中のグラフィックがスムーズにスライドインおよびスライドアウトするようにします。

于 2012-09-05T06:10:13.557 に答える
0

id.ではなくクラスを選択するために使用する必要があり、beforeCompleteとcompleteの間にもありません。#,

于 2012-09-05T06:03:49.487 に答える
0

e #loader の HTML にローダー イメージを追加してから削除してみてください。（画像にIDを追加したことに注意してください）

beforeSend: function() 
{
      $('.loader').append('<img src="/graphics/loading.gif" id="waitSpinner" alt="Wait" />');
}
complete: function()
{
      $('#waitSpinner').remove();
}

編集：それがクラスだったので、#loaderを.loaderに変更しました。

于 2012-09-05T05:58:09.633 に答える
0

なぜ\スラッシュを使うのですか

これを試して

beforeSend: function() 
{
      $('.loader:last-child').html('<img src="/graphics/loading.gif" alt="Wait" />');
}
complete: function()
{
      $('.loader:last-child').html('');
}
于 2012-09-05T05:44:11.513 に答える
0

これを試して

beforeSend: function() 
{
      $("#loader").last().html('<img src="/graphics/loading.gif" alt="Wait" />');
}
complete: function()
{
      $("#loader").last().html('');
}
于 2012-09-05T05:45:49.500 に答える
0

space引用符をエスケープする必要はありませんimgsrc。img src

ロブが彼の答えで述べたように、

ローダーはIDではなくクラスであるため、セレクターは$('.loader:last-child') にする必要があります。(#)の代わりにピリオド(.)を使用する

,また、後にコンマを追加しbeforeSend: function(){},て試してください。

次のコードを使用します。

beforeSend: function() {
    $('.loader:last-child').html('<img src="/graphics/loading.gif" alt="Wait" />');
},

complete: function() {
      $('.loader:last-child').html('');
}
于 2012-09-05T05:51:49.003 に答える