javascript - 如何将预加载器添加到网站而不手动显示/隐藏它

Question

在我的网站(MVC 和 Web API)上，我添加了预加载器以提供更好的用户体验。

我在两个点​​添加了预加载器:

1. 登录后，在用户经过身份验证和重定向到主页之间。
2. 在从服务器加载数据的每个页面中。

我使用了一张图像，当页面/数据加载时我显示，当数据完全加载时我隐藏。

<div id="dvReqSpinner" style="display: none;">
  <br />
  <center><img src="~/images/loading_spinner.gif" /></center>
  <br />
</div>

使用jquery，我显示和隐藏它:

$("#dvReqSpinner").show();
$("#dvReqSpinner").hide();

每次需要加载数据(使用 AJAX 调用 Web API、验证用户身份等)时不断显示和隐藏图像有点烦人。 - 每个操作都需要时间，并且我想向用户显示某件事正在“发生”)，是否有任何“自动”选项可以在网站上提供预加载器？

Answer 1

我不知道是否是这样，但是如果你使用jquery ajax来处理你的请求，你可以这样做:

$(document).ajaxStart(function() {
   // every time a request starts
   $("#dvReqSpinner").show();

}).ajaxStop(function() {
   // every time a request ends
   $("#dvReqSpinner").hide();

});

编辑:如果您想避免显示快速请求的微调器，我认为这可以使其工作:

var delayms = 3000; // 3 seconds

var spinnerTimeOut = null;

$(document).ajaxStart(function() {
   // for every request, wait for {delayms}, then show spinner

   if(spinnerTimeOut!=null){
      clearTimeout(spinnerTimeOut);
   }

   spinnerTimeOut = setTimeout(function(){  
      $("#dvReqSpinner").show();
   }, delayms);

}).ajaxStop(function() {
   // every time a request ends
   clearTimeout(spinnerTimeOut); // cancel timeout execution
   $("#dvReqSpinner").hide();


});

尝试一下。我无法测试它 -.-'