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

【问题标题】：Improving jQuery UI ajax loading dialog for all page loads改进所有页面加载的 jQuery UI ajax 加载对话框
【发布时间】：2011-07-26 08:55:03
【问题描述】：

我的 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 加载内容时，加载弹出窗口就会出现。伟大的。我的下一个问题是 - 我得到的反馈 - 他们认为加载此内容很奇怪，但是当您在 Web 应用程序中请求一个全新的页面时，“加载”需要一段时间，并且没有加载对话框像其他 ajax 加载示例一样。就我个人而言 - 这很有意义，但用户不喜欢它。

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

感谢任何建议？

谢谢。

【问题讨论】：

标签： jquery ajax json loading

【解决方案1】：

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

所以说真的，就这样吧

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

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

【讨论】：

其实，这在firefox中有效，但在IE中无效！？！？ - 我使用相同的代码来构建模态窗口 - 它在 IE 中显示以进行 ajax 加载，但出于某种原因 - IE 似乎不喜欢玩卸载事件...... Hmmmmmmmm.......
所以卸载确实有效 - 我发出警报 - 但它不会让 jquery ui 代码加载 $("#dialog").dialog('open'); （但仅适用于此事件 - 它适用于 .ajaxStart ！？！？） -在兼容模式下解决 IE8 的任何想法

【解决方案2】：

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

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

【讨论】：