在 asp.net 中加载页面时如何添加 Ajax 加载器？答案

【问题标题】：How to add Ajax loader in while loading the page in asp.net?在 asp.net 中加载页面时如何添加 Ajax 加载器？
【发布时间】：2011-03-07 18:33:57
【问题描述】：

我想在加载具有透明背景的页面时使用 ajax 加载器。我尝试了以下代码，它显示了加载图像，但如何将整个背景覆盖为透明的。我的代码是：

<div class="UpdateProgress1">
<asp:UpdateProgress ID="UpdateProgress1" runat="server" DynamicLayout="true">
<ProgressTemplate>
    <img src="image/ajax-loader.gif"  /> Loading ...
</ProgressTemplate>
</asp:UpdateProgress>
</div>

我的 CSS 是：

.UpdateProgress1 {
 color:#fff;
 position:fixed;
 filter:alpha(opacity=50);
 -moz-opacity:0.5;
 -khtml-opacity: 0.5;
 opacity: 0.5;
 vertical-align: middle;
 text-align: center;
 background-color: #000;
 float: left;
 top:18%;
 left:13%;
 width:73%; 
 }

如果有人知道任何链接或任何解决方案，请告诉我。在上面的 css 中，如果我添加 height 属性，则图像会在页面加载时显示而无需单击事件。谢谢。

【问题讨论】：

标签： javascript asp.net progress-bar

【解决方案1】：

澄清一下，您要执行以下哪些操作：

1) 加载页面，当用户调用回发时，在等待回发时显示加载器。 2) 在实际加载的页面的开头显示一个加载器。

从描述来看，好像是后者。如果是这样，这是一种非常不常见的方法。根据页面内容，很难知道何时真正“完成加载”。对于 HTML/Javascript 设置，您最好的选择可能是：

  $(document).ready(function() {
    // code to hide the loader animation
  });

（请注意，如果您还没有 jQuery，您将需要 jQuery。）

如果您的内容因其他原因而延迟，例如等待加载的脚本执行某项操作或等待浏览器插件（如 Flash），事情可能会变得更加复杂。

【讨论】：

当用户点击特定页面时，我希望在加载页面时使用 ajax 加载器
如果 Ajax 加载器存在于用户正在导航 from 的页面上，那么它应该在新页面加载后消失（除非你有某种框架设置或奇怪的东西在您的设计中）。但是，如果它在用户导航 to 的页面上，那么作为一种不常见的方法，您可能必须在文档完成加载时手动隐藏它。到目前为止，我还没有遇到比 $(document).ready() 更可靠的方法，正如我所说，它的可靠性从用户的角度来看是有问题的，具体取决于页面内容。
$(document).ready 的问题是它会在 DOM 加载后立即触发，但在所有外部内容（图像、css 等）到位之前，这并不是什么Renu123 想要 - 只有当所有其他内容都准备好时，加载程序才会消失。

【解决方案2】：

您的 HTML 中似乎有错字：

<div id="wrappe">
---- Whole code goes here ----
</div>

这应该称为“包装器”。

您的 JavaScript 抛出错误，因为 document.getElementById("wrapper") 返回 null，它没有属性样式。

你在什么浏览器中测试这个？您应该会在 IE 窗口的左下方看到一个黄色的小警告图标，它会为您提供一些线索，表明存在脚本错误。

网页错误详情

消息：需要对象
线路：34
字符：13
代码：0
网址：http://localhost:64888/ImageTest.aspx

如果您使用的是 Firefox，请获取一份 Developer Toolbar 的副本，它会给您一个漂亮的红色感叹号和 JavaScript 的确切错误：

错误：document.getElementById("wrapper") 为空
源文件：http://localhost:64888/ImageTest.aspx
线路：34

【讨论】：

【解决方案3】：

使用具有更高 z-index 的 iframe 来阻止主页。

<iframe id="blockPage" src="about:blank" style="display: none; position: absolute;
        z-index: 10; filter: Alpha(Opacity=40) DropShadow(Color=#454545);"></iframe>

使用以下函数显示和隐藏框架

function BlockPageContent()
{
    var ifrm = document.getElementById("blockPage");
    if(null != ifrm)
    {
        ifrm.style.display = "block";
        ifrm.style.top = 0;
        ifrm.style.left =0;
        ifrm.style.width=screen.availWidth;
        ifrm.style.height = screen.availHeight; 
    }
}

function ShowPageContent()
{
    var ifrm = document.getElementById("blockPage");
    if(null!= ifrm && ifrm.style.display != "none")
    {
        ifrm.style.display = "none";
    }
}

并以下列方式调用上述函数。

在“InitializeRequest”中调用 BlockPageContent，在“EndRequest”中调用 ShowPageContent。 "InitializeRequest" 和 "EndRequest" 是 PageRequestManager 对象的事件处理器。

【讨论】：