javascript 如何在加载整个 aspx 页面之前显示进度条？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8612769/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to display progress bar until whole aspx page is load?
提问by Sushant Bhatnagar
I have a master page Root.master and a page default.aspx . I want to display progress bar until whole default.aspx page is loaded .
我有一个母版页 Root.master 和一个页面 default.aspx 。我想显示进度条，直到加载整个 default.aspx 页面。
I tried following code:-
我尝试了以下代码：-
<html>
<head><title>xx</title>
</head>
<body style="visibility:hidden;" onload="function(){document.body.visibility='visible'}">
<img src="xxxx.gif" style="visibility:visible !important">
</body>
</html>
But problem is that I do not have body on default.aspx , it is on root.master , if we put it on root.master, it apply all pages which inherit from root.master . So there is another for it .
但问题是我在 default.aspx 上没有 body，它在 root.master 上，如果我们把它放在 root.master 上，它会应用从 root.master 继承的所有页面。所以还有另一个。
Please suggest me usable link or samples.
请建议我可用的链接或样本。
采纳答案by Chamika Sandamal
in your sample if you are using jQuery, you can use following re-factoring to your code
在您的示例中，如果您使用的是 jQuery，则可以对代码进行以下重构
$(document).load(function(){
$('body').css('visibility','visible');
}
回答by Chamika Sandamal
You can add a reference to jQueryand then do a little code something like:
您可以添加对jQuery的引用，然后执行一些类似以下操作的代码：
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(){ // Wait until the page has finished loading
if ($(".ProgressBar")) // Detect the element with class ProgressBar
{
$(".ProgressBar").hide(); // If found, set it to be display:none;
}
}
</script>
</head>
<body>
<div class="ProgressBar">
<img src="Whatever.gif" alt="Please wait..." />
</div>
</body>
</html>
Also doable without jQuery but it's just so much easier to use it ;)
也可以不使用 jQuery，但使用起来要容易得多;)
That way the progress bar gif loads, and once the page is done it is set to invisible.
这样进度条 gif 就会加载，一旦页面完成，它就会被设置为不可见。
I hope that might help! Good luck.
我希望这可能会有所帮助！祝你好运。
回答by Pencho Ilchev
You don't mention any libraries, so here is a pure js solution:
http://jsfiddle.net/TTU7v/
The idea is to put the script as close to the opening body tag (but after it!) as possible:
你没有提到任何库，所以这里是一个纯 js 解决方案：http:
//jsfiddle.net/TTU7v/
想法是将脚本尽可能靠近打开的 body 标签（但在它之后！）：
<script type="text/javascript">
var body = document.getElementsByTagName("body")[0];
body.style.visibility = "hidden";
window.onload = function(){body.style.visibility = "visible";};
</script>
