在 ajax 调用上显示 *浏览器* 加载指示器（例如发生回发时）

Question

例如：转到您的 Facebook 墙，滚动页面末尾，Facebook 将异步加载更多墙帖子。或者只需单击墙上帖子中的图像。图像对话框（带有注释和较大图像）也正在异步加载。 （您可以使用 firebug 查看 GET 请求）。

但是通过查看 Firefox 选项卡，您会看到加载指示器，就像发生回发时一样。

我知道这可以通过使用 IFrame 并更改其 src 来实现。就像 iGoogle 所做的那样。但我不确定 Facebook 是否使用 IFrame 来加载额外的墙贴。还有其他方法可以实现这一目标吗？

更新：我所说的“加载指示器”并不是指 ajax 指示器。
正如我提到的，浏览器指示器（选项卡左侧的指示器向我们显示页面是否正在加载）更改为加载，就像回发一样。

Answer 1

不是据我所知。
我的猜测是他们可能将 IFrame src 设置为 ajax 方法，并且在加载时将内容移动到 div （或另一个元素）。

Answer 2

可以通过 iframe 来完成。简而言之，您附加了一个隐藏的 iframe：

var $loadingIndicator = $('<iframe src="/loading/" class="visuallyhidden">');
$loadingIndicator.appendTo('body');

它必须加载一个停止加载的页面。可能在网站自己的域上，因为浏览器实际上在状态栏中显示正在等待domainname.com。

在文件 domainname.com/loading/index.php 中，您输入：

<?php sleep(100);

完成后删除 iframe：

$loadingIndicator.remove();

考虑到这实际上是一个额外的请求，这并不理想。有几个原因：

• 您的服务器将有很长的请求，可能会影响性能
• 浏览器将使用少数可用的并发连接之一，因此可能会减慢加载的速度
• 它会使动画卡顿在我的情况下（ Chrome 27/OSX，请求动画帧）。

通过慢速加载技术
通过 https://stackoverflow.com/a/3145840/288906

Answer 3

我制作了一个基于 jQuery 的库来处理这个问题，这在某些情况下（同源）应该是一个可行的解决方案，并在某些桌面浏览器（至少是现代 Chrome 和 Firefox）中成功触发繁忙指示器，奇怪的是，还有 IE8，但可能不是 IE9 ，并且绝对不是 Safari 或大多数移动浏览器）。

Noisy JSON

基本上，我使用 iframe 方法来触发“busy” ” 指示器，但不会人为地点击单独的“停滞”页面：相反，它只是使用自定义 $.ajaxTransport 来传递隐藏的 iframe，然后解析 json 响应。结果是浏览器显示与您发出的请求直接相关的加载指示器：没有额外的 http 请求。您基本上可以只安装插件，然后通过更改 dataType 参数来决定哪些 ajax 请求应该有噪音，哪些不应该有噪音。

附带说明一下，在 iframe 中加载内容不会在 Safari 和 IE9 中向用户触发任何 UI 反馈，这真是奇怪。