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

I have lots of ASP.NET Pages in which all the contents of the page has been placed inside Content Panel on each page..They takes some time to load fully when requested. Now I want to show a GIF image and that Page remains un-editable until it loads Fully using JQuery.. Please don't give examples using div tag as I m dealing with content panel. Any Ideas??

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

2 个解决方案

#1

Something along the lines of:

有点像：

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

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

The loader img can be a div/asp:panel with CSS style. Important to this setup as well is the height 100% on the html, body element.

加载器img可以是带有CSS样式的div / asp：面板。这个设置的重要性在于html，body元素的高度100％。

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

#2

You should take a look at jQuery's load().

你应该看看jQuery的load（）。

Something like this:

像这样的东西：

<!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>

#1