動的コンテンツが非同期に読み込まれている間にスピナー アニメーションを表示するページがあります (ここでは 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
ます。
開発中にこの問題を修正するための推奨事項はありますか? そして、それは生産上の問題になるでしょうか?