改进所有页面加载的 jQuery UI ajax 加载对话框

Question

我的 Web 开发项目通过 JSON 和 AJAX 加载大量内容（这不是基本相同的东西）。

我已经在 jquery UI 对话框中实现了加载 gif 弹出窗口。它与 .ajaxStart 和 .ajaxStop 事件挂钩。

$(document).ready(
        function () {
            $(window).load(function () { Load(); });
....

 function Load() {
.ajaxStart(function () {
//Show popup
}
.ajaxStop(function () {
//Hide popup

所以

这非常好，每当我通过 ajax 加载内容时，就会出现加载弹出窗口。伟大的。我的下一个问题是 - 我收到的反馈 - 他们认为加载此内容很奇怪，但是当您在网络应用程序中请求整个新页面时，“加载”需要一段时间，并且没有加载对话框就像其他 ajax 加载示例一样。就我个人而言 - 这非常有道理，但用户不喜欢它。

有没有什么简单的方法可以将相同的对话框连接到页面加载？我在想，如果有一种方法可以知道/jquery 事件，当他们请求新页面时，我可以弹出加载对话框并将其留在那里，直到新页面加载。

有什么建议吗？

谢谢。

Answer 1

当然，检查卸载事件。 http://api.jquery.com/unload/

因此，只需将

$(window).unload(function () { Load(); });

其放入准备好的文档中 即可当用户导航到新页面时将显示弹出窗口（可能需要自定义它，因为考虑到您没有动态加载任何数据，您不需要任何 ajax 请求）。

Answer 2

在加载下一页之前，您不能离开加载对话框，因为当前文档的卸载和下一个文档的加载之间通常存在相当大的间隙。

如果您的网站完全是 ajax 那么您可以这样做，但是制作一个完全由 ajax 驱动的网站需要对细节（后退按钮支持、书签、事件等）非常关注，所以我会三思而后行。