在页面渲染时显示 Ajax Loader答案

【问题标题】：Display Ajax Loader while page rendering在页面渲染时显示 Ajax Loader
【发布时间】：2010-09-19 13:07:48
【问题描述】：

这可能是一个简单的问题，但我如何才能最好地使用 ASP.NET 中的 AJAX 加载器在构建页面时提供加载对话框？

我目前有一个带有关联 UpdateProgressPanel 的 UpdatePanel，其中包含 ProgressTemplate 中的加载消息和 gif。

目前我有一个页面，onLoad() 去获取业务实体，然后显示它们。在执行此操作时，我想显示一个 AJAX 加载程序。

在页面加载中没有任何内容并有一个触发 onLoadComplete 或 unLoad() 的隐藏按钮会更好吗？然后等待按钮单击方法完成显示 UpdateProgressPanel？

【问题讨论】：

标签： asp.net vb.net ajax page-lifecycle

【解决方案1】：

您可以在 .Net 之外的 HTML 中执行此操作。在您的 ASPX 页面中，您有如下代码：

在页面的最底部，就在你可以有一个如下所示的代码 sn-p 之前：

document.getElementById("正在加载").style.display = "none";
脚本>

图形——只要它位于页面顶部——将首先呈现。然后你所有的 onLoad 东西都会发生，最后内联 JavaScript 会发生在最后，因为它位于页面底部。

很多时候，我会禁用处于未加载状态的按钮并在底部的 JavaScript 中启用它们。这可以防止用户在页面准备好之前获得点击快乐并触发事件。

【讨论】：

【解决方案2】：

我用 Timer 控件做了类似的事情。您的 OnLoad 只是打开计时器，页面完成渲染。然后计时器（具有一些最小的间隔值）会做脏活，正确显示进度面板。记得在流程的最后一步关闭计时器。

【讨论】：

答案应始终以示例为准。

【解决方案3】：

如果您真的想要细粒度的控制，您可以使用基于进度条的 AJAX 预加载器。您可以将其配置为在每次状态更改时完成。即从 0 到 4（5 个就绪状态），每个状态进展 20%。创建一个非常简单。拥有一个容器div，其中包含另一个div，其width 在每个状态下以20% 的步长从0 变化到100%。为内部div（例如：蓝色）添加背景颜色，使其看起来像是在进步。我猜 GMail 的 Pre-loader 使用了类似的方法。

【讨论】：

【解决方案4】：

帖子很旧，但你可以看看http://ajax.net-tutorials.com/controls/updateprogress-control/

【讨论】：