[英]Order of request handlings with Rails 3.2 in development mode
I have a page that displays a spinner animation while dynamic content is loaded asynchronously (HAML here): 我有一个页面显示动态内容异步加载时的微调器动画(此处为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);
}
});
});
To simulate a slow request, I have put a sleep of a few seconds into the :voteables
-method. 为了模拟一个缓慢的请求,我将
:voteables
-method睡眠了几秒钟。
Now, the problem is that the browser does not show the background-image
of the #loading_spinner
-element. 现在,问题在于浏览器没有显示
#loading_spinner
-element的background-image
。
What happens is that although the JavaScript-code should execute when the page is loaded, it actually executes the AJAX-call before it fetches the background-image for the spinner. 发生的事情是,尽管JavaScript代码应该在页面加载时执行,但实际上它会在为微调器获取背景图像之前执行AJAX调用。 So when the delay in the controller is 3 seconds, the image is loaded immediately afterwards (because the requests are not served in parallel), the
success
-callback is executed and the image is immediately hidden. 因此,当控制器中的延迟为3秒时,此后立即加载图像(因为未并行处理请求),将执行
success
回调并立即隐藏图像。
I am using Rails 3.2 and running the app with rails server
. 我正在使用Rails 3.2并使用
rails server
运行该应用程序。
Any recommendations how to fix this issue in development? 有什么建议如何在开发中解决此问题? And will it be an issue in production?
在生产中会不会有问题?
I think if you wrap the ajax request in load, instead of ready, it won't execute until the images have downloaded, like this: 我认为,如果您将ajax请求包装在负载中,而不是准备好,它将在图像下载后才会执行,如下所示:
$(window).load(function(){
// ajax functionality goes here
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.