加载数据时的浏览器繁忙指示器

Question

我正在尝试实现这里所解释的内容。

我正在尝试使用动态脚本标签从服务器加载一些数据到客户端（即我创建一个脚本标签，将其src设置为我的JSON控制器，并将其附加到我的head或body标签）。

脚本使用从服务器返回的数据正确加载。但在脚本加载过程中，浏览器没有显示忙指示器（已尝试使用Chrome / Firefox）（而根据this reference（第35页），这应该是默认行为）。

我已经为我的服务器端方法添加了 Sleep 方法来模拟长时间运行的过程，以查看繁忙指示器是否出现。但是仍然没有成功。

附注：当我使用 IFrame 而不是 script 时，一切正常，浏览器显示繁忙指示器。但是使用 script 标签时无法做到这一点。

- Kamyar

---

使用类似Block UI插件的东西是一个选项吗？如果你已经投入了jQuery，那么它运行得相当不错（否则就不是那么好了）。 - Tieson T.

Block UI只是改变光标图标，我真正想要的是在选项卡上看到旋转指示器。我很困惑Facebook是如何做到的。它也使用IFrames吗？ - Kamyar

Answer 1

简而言之:

Facebook在加载页面数据时确实使用了iframe，并且浏览器加载指示器也没有什么神奇的地方。

---

更多细节:

当您从一个页面导航到另一个页面时，FB会将一个隐藏的Iframe注入到DOM中，它的src属性将被设置为您请求的页面（带有一些参数，指示这是类似于ajax的请求而不是完整的页面刷新）。因此，页面实际上在隐藏的iframe中加载。但是内容不是HTML，而是一堆JavaScript标签，这些标签消耗了一些包含HTML和其他渲染页面所需数据的JSON对象。
下面是我在加载页面并将iframe注入到DOM中期间从我的firebug控制台中获取的信息。您可以检查页面加载完成后，iframe是否已被移除。

要了解这些脚本如何工作以加载页面数据，您可以阅读有关BigPipe技术的文章。简而言之，它将每个页面的构建分解为几个所谓的页面片段，它们具有自己的CSS和JS资源，因此每个页面片段的资源可以与其他页面片段并行从服务器获取。 big_pipe将在所有资源可用后将每个页面片段放入其容器中。

- Alireza Mirian

---

他们的方法在所有浏览器上都不起作用。值得注意的是，Safari和较新版本的IE在浏览器UI方面根本不响应iframe加载。 - Dtipson

Answer 2

在网页上异步加载组件不会在非IE浏览器中触发浏览器的购买图标。即使对于Facebook也是如此。尝试点赞某篇帖子或在墙上写些东西，这两个操作都不会在非IE浏览器中显示浏览器的购买图标。

- Epuri

---

在演示部分中导航至 http://developers.facebook.com/docs/reference/plugins/comments/，点击 查看NUMBER_OF_COMMENTS条评论，其中 NUMBER_OF_COMMENTS 是评论数量。观察浏览器指示器，它会在不刷新整个页面的情况下变为繁忙状态。我怀疑他们正在使用 iframe。 - Kamyar

它会在加载个人资料图片时显示繁忙图标，但不会在通过AJAX返回的所有数据上显示。 - Epuri

@Epuri 当你在Facebook页面之间导航时，不会发生完整的页面重新加载。以前页面的内容将被删除并获取新的内容，浏览器加载指示器会让每个人都认为它是完整的页面重新加载，但实际上并不是。您可以通过修改标题中的某些内容（使用浏览器开发人员工具）然后导航到另一个页面来检查它。更改将保留。 - Alireza Mirian