在开发模式下使用Rails 3.2的请求处理顺序

时间：2022-06-13 11:00:05

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的背景图像。

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. 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.

会发生的事情是,虽然JavaScript代码应该在页面加载时执行,但实际上它会在获取微调器的背景图像之前执行AJAX调用。因此,当控制器中的延迟为3秒时,之后立即加载图像(因为请求不是并行提供的),执行成功回调并立即隐藏图像。

I am using Rails 3.2 and running the app with rails server.

我正在使用Rails 3.2并使用rails服务器运行应用程序。

Any recommendations how to fix this issue in development? And will it be an issue in production?

有关如何在开发中解决此问题的任何建议?它会成为生产中的问题吗?

1 个解决方案

#1

3  

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请求包装在load中,而不是准备好,它将在图像下载之前执行,如下所示:

$(window).load(function(){
  // ajax functionality goes here
});

#1

3  

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请求包装在load中,而不是准备好,它将在图像下载之前执行,如下所示:

$(window).load(function(){
  // ajax functionality goes here
});
标签：

相关文章