42

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

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

他们如何做到这一点？我有一个小指针，但是让浏览器表现得像正在加载一样会很不错。有任何想法吗？

4

6 回答 6

8

我想这就是你的答案。（来自 Many.com 的反向 AJAX 或“慢加载”技术）

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

于 2010-06-30T01:10:07.360 回答
5

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

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

于 2011-08-10T21:39:45.317 回答
4

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

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

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

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

于 2017-11-27T22:24:10.087 回答
2

本文详细介绍了不同类型的请求以及它们是否会触发进度条等繁忙指示器。

于 2009-12-16T22:27:15.670 回答
-1

可能的解决方案是使用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 演示

现在你只需要找到加载图标Chrome和其他流行的浏览器一样，然后fake loading在你调用ajax时触发。

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

于 2017-11-29T10:26:16.803 回答
-1

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

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

在发出请求时显示/隐藏加载指示器很简单JavaScript，代码也很简单。JQueryAJAX

$('#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>

于 2017-11-22T18:27:14.697 回答