0

動的コンテンツが非同期に読み込まれている間にスピナー アニメーションを表示するページがあります (ここでは HAML)。

#loading_spinner

#async_vote

:javascript    
  $(document).ready(function() {
    $.ajax({
      url: "/votes/voteables",
      cache: false,
      beforeSend: function(xhr){
        $("#loading_spinner").show();
      },
      success: function(html){
        $("#loading_spinner").hide();
        $("#async_vote").html(html);
      }
    });
  });

遅いリクエストをシミュレートするために、メソッドに数秒のスリープを入れました:voteables

background-imageここでの問題は、ブラウザーが - 要素のを表示しないこと#loading_spinnerです。

ページが読み込まれると JavaScript コードが実行されるはずですが、実際にはスピナーの背景画像を取得する前に AJAX 呼び出しが実行されます。そのため、コントローラーの遅延が 3 秒の場合、イメージは直後にロードされ (要求が並行して処理されないため)、success-callback が実行され、イメージはすぐに非表示になります。

私は Rails 3.2 を使用しており、アプリを実行していrails serverます。

開発中にこの問題を修正するための推奨事項はありますか? そして、それは生産上の問題になるでしょうか?

4

1 に答える 1