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

Question

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

在 Gmail 中，当您进入收件箱、发送消息等时，浏览器的行为就像正在加载（在 FF 中，停止按钮变为启用状态，进度条出现），但它不是在新页面上，而是通过 AJAX 完成的。

他们是如何做到这一点的？我有一个旋转的小指示器，但如果让浏览器表现得像正在加载一样，那就太好了。有什么想法吗？

Answer 1

我认为这是您的答案。 （Reverse-AJAX 或来自 Amazing.com 的“慢加载”技术）

看起来像 GMail 和 Facebook 方法（浏览器将页面显示为“正在加载”，并带有加载图标等 - 它只是模拟，因为有后台 ajax 请求） :)

Answer 2

我在这里找到了相关的答案：浏览器在ajax请求完成后继续“加载”。

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

Answer 3

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

如果您的整个用户界面在请求时变得无效，则适合使用带有加载指示器的覆盖层。稍微不透明的覆盖层可以与用户进行交流，而不会造成视觉中断。

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

这些是在许多谷歌应用程序中发现的常见模式。

Answer 4

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

我添加了一个 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 5

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

您的需要是在浏览器上显示加载图标，所以我认为另一种方法是创建假加载图标。

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

然后，尝试使图标具有动画效果。大多数浏览器不支持 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);

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

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

因此将图像转换为base64格式比它工作顺利。

Base64 demo

现在你只需要找到加载图标与 < code>Chrome 等流行浏览器，然后在调用 ajax 时触发假加载。

---

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

• https://gist.github.com/mathiasbynens/428626
• 如何为图标制作动画？