显示进度条并禁用页面的所有内容，直到页面加载答案

【问题标题】：Show Progress Bar And disable all contents of the page until page loads显示进度条并禁用页面的所有内容，直到页面加载
【发布时间】：2013-04-27 19:41:27
【问题描述】：

我有很多 ASP.NET 页面，其中页面的所有内容都放置在每个页面的内容面板中。它们需要一些时间才能在请求时完全加载。现在我想显示一个 GIF 图像，并且该页面在完全使用 JQuery 加载之前保持不可编辑。请不要在我处理内容面板时使用 div 标签给出示例。有什么想法吗？？

【问题讨论】：

参考此链接：stackoverflow.com/questions/1853662/…

标签： jquery asp.net

【解决方案1】：

类似的东西：

// once the DOM is ready
$(function(){
    // show #yourWrapper with loader img
});

// once all is loaded
$(window).load(function(){
    // hide #yourWrapper
});

加载器 img 可以是具有 CSS 样式的 div/asp:panel。对于此设置，html、body 元素的高度 100% 也很重要。

html, body { height: 100%; }
#yourWrapper { height: 100%; background: url("../art/loader.png") no-repeat scroll 50% 50% transparent; overflow: hidden; }

【讨论】：

这意味着 $(window).load(function(){}); 确保整个页面的加载成功，然后你可以隐藏你的图像？？
是的，没错。例如，如果您检查 Firebug 中的 NET 选项卡，您将看到已加载文件的红色和蓝色行。

【解决方案2】：

你应该看看jQuery's load()。

类似这样的：

<!DOCTYPE html>
<html>
<body>
<img src="loader.gif" id="loader">
<script src="path/to/jQuery.js"></script>
<script>
$(document).ready(function(){
    $('#loader').load('some/url.html');
})
</script>
</body>
</html>

【讨论】：