0

Railsのインデックスビューでは、多かれ少なかれこのRailscastに従って、ajaxページ付けを実装しています。

ユーザーがページ付けリンクをクリックしたときに、次の手順を実行する必要があります。

  1. 既存のインデックスはフェードアウトします。
  2. スピナーが表示されます。
  3. 新しいインデックスコンテンツはフェードインします。

index.js.erbには、次のコンテンツがあります。

$(".ajaxable-content").fadeOut('fast');
$(".ajaxable-content").html('<div class="ajax-spinner></div>');
$(".ajaxable-content").delay(400);
$(".ajaxable-content").html('<%= escape_javascript(render :partial => "my/ajax/content" %>');
$(".ajaxable-content").fadeIn('slow');

機能にもかかわらず、delay私が見ているのは次のとおりです。

  1. 新しいコンテンツがレンダリングされます。
  2. コンテンツがフェードアウトします。
  3. コンテンツがフェードインします。

これはあまり良いユーザーエクスペリエンスではありません！

（さらに、スピナーが表示されていないようです。または、交換が早すぎて目立たない可能性があります）。

新しいコンテンツがレンダリングされる前にフェードアウトが完了するようにする正しい方法は何ですか？

フェージングとスピナーが発生している間にデータベースへの要求がバックグラウンドで発生するようにこれを設定するための最良の方法は何ですか？

4

1 に答える 1

1

index.js.erbのアクションは、そのコンテンツがすでにレンダリングされてクライアント側に配信されているときに実行されます。したがって、コンテンツの支払い（および「読み込み中」のスピナーの非表示）に対してのみ責任を負うことができます。ajaxリクエストを送信する前に、現在のページをフェードアウトしてスピナーを表示してみてください（スクリーンキャストのコードを使用しています）

$(function () {
  $('#products th a').live('click', function () {
    var href = this.href;
    $(".ajaxable-content").fadeOut('fast', function(){
      $(".ajaxable-content").html('<div class="ajax-spinner></div>');
      $.getScript(href);
    });
    return false;
  });
})

そしてindex.js.erbでは最後の2行だけを残しました

$(".ajaxable-content").html('<%= escape_javascript(render :partial => "my/ajax/content" %>');
$(".ajaxable-content").fadeIn('slow');

スピナーの可視性もcssに依存します。表示すると、その親divは非表示（フェードアウト）になります。

于 2012-06-02T11:02:57.280 に答える