Question

我正在制作一个支持ajax的实验室调度程序，而且一些ajax操作并不是很快。

在Gmail中，当您转到收件箱，发送消息等时，浏览器会像加载一样（在FF中停止按钮变为启用状态，出现进度条），但它不在新页面上，已完成通过AJAX。

他们是如何做到的？我有一个小的spinny指示器，但是让浏览器像加载它一样很好。有什么想法吗？

Answer 1

我认为this是你的答案。（来自Obviously.com的反向AJAX或“慢负载”技术）

看起来像GMail和Facebook方法（浏览器显示页面为“加载”加载图标等 - 它只是模拟，因为有一个背景ajax请求）:)）

Answer 2

我在这里找到了一个相关的答案：Browser continues 'loading' after ajax request finishes。

您可以创建iframe并打开和关闭其contentDocument，它似乎启动和停止浏览器的本机加载动画。请在此处查看示例：http://jsfiddle.net/KSXkS/1/。

Answer 3

许多用户甚至不理解或注意浏览器的本机加载指标。如果它确实是一个长时间运行的负载，那么最好的用户体验就是将其指示为Web应用程序的一部分。记住上下文是王道，这是一个向用户传达正在发生的事情以及仍然可用的功能的机会。

如果您的整个用户界面在请求时无效，则需要使用加载指示符覆盖。略微不透明的覆盖层可以与用户进行沟通，而不会造成破坏性的视力中断。

如果您只是需要显示请求已经开始并且正在运行，那么启动请求的按钮旁边的微调器最好。成功时，旋转器可以替换为绿色复选标记或其他常见指示器，在短时间内淡出。

这些是Google许多应用程序中常见的模式。

Answer 4

This article详细介绍了不同类型的请求，以及是否触发了忙碌指标，例如进度条。

Answer 5

我相信你想要这样的东西。

我添加了一个API来提取github.com的地理位置（不相关，但我认为它可用于示例API的目的）。

在发出JavaScript请求时，显示/隐藏加载指示符的代码很简单JQuery和AJAX。

$('#btn').click(function() {
  $('#overlay').show();
  $.ajax('https://freegeoip.net/json/github.com').then(function(response) {
    $('#overlay').hide();
    $('#country').html(response.country_name);
  });
});

body {
  padding: 0;
  margin: 0;
}

#overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  top: 0;
  background-color: rgba(255, 255, 255, 0.7);
}

.plus {
  display: flex;
  margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="overlay" style="display:none">
  <div class="plus">
    <img src="https://loading.io/assets/img/landing/curved-bars.svg" alt="loading"/>
  </div>
</div>

<div>
  <button id="btn">Perform AJAX Operation</button>
  <div>
  Country: <span id="country"></span>
  </div>
</div>

Answer 6

可能的解决方案是使用iframe来触发加载。但根据以前的答案，iframe方法无法在chrome上运行。

您需要在浏览器上显示加载图标，因此我认为另一种方法是创建fake loading icon。

您可以手动更新浏览器图标。有一些关于如何更新浏览器图标的教程。

然后，尝试制作图标动画。大多数浏览器都不支持gif图标，因此您需要做的是每隔几秒钟更新一次图标。

这是演示代码：

 var favicon_images = [];
 for (var i = 1; i <= 12; i++)
   favicon_images.push('./icon/' + i + '.png');

 var image_counter = 0;

 setInterval(function() {
     var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
     link.type = 'image/x-icon';
     link.rel = 'shortcut icon';
     link.href = favicon_images[image_counter];
     document.getElementsByTagName('head')[0].appendChild(link);

   if(image_counter == favicon_images.length -1)
         image_counter = 0;
     else
         image_counter++;
 }, 150);

我创建了一个快速演示。 Demo

通过此演示，您可以发现图标动画无法顺利运行。这是因为每次我们更新图标时，浏览器都会再次请求图标。

因此将图像转换为base64格式，而不是顺利运行。

Base64 demo

现在您只需要找到加载图标与Chrome和其他常用浏览器相同，然后在调用ajax时触发fake loading。

这里我粘贴一些更改图标教程：

如何让AJAX触发浏览器的加载指示器

6 个答案: