如何显示进度条直到加载整个 aspx 页面？

发布于 2024-12-22 17:40:27 字数 515 浏览 0 评论 0原文

我有一个母版页 Root.master 和一个页面 default.aspx 。我想显示进度条，直到加载整个 default.aspx 页面。

我尝试了以下代码：-

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

但问题是我在 default.aspx 上没有主体，它在 root.master 上，如果我们把它放在 root.master 上，它会应用从 root.master 继承的所有页面。所以还有另一个。

请向我推荐可用的链接或示例。

原文

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 .

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 .

Please suggest me usable link or samples.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

像你 2024-12-29 17:40:27

在您的示例中，如果您使用 jQuery，则可以对代码进行以下重构

 $(document).load(function(){
     $('body').css('visibility','visible');
 }

in your sample if you are using jQuery, you can use following re-factoring to your code

 $(document).load(function(){
     $('body').css('visibility','visible');
 }

回复收藏 0 原文

握住你手 2024-12-29 17:40:27

您可以添加对 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>

没有 jQuery 也可行，但它更容易使用它;)

这样进度条 gif 就会加载，一旦页面完成，它就会设置为不可见。

我希望这会有所帮助！祝你好运。

You can add a reference to jQuery and then do a little code something like:

<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 ;)

That way the progress bar gif loads, and once the page is done it is set to invisible.

I hope that might help! Good luck.

回复收藏 0 原文

淡淡の花香 2024-12-29 17:40:27

你没有提到任何库，所以这是一个纯js解决方案：
http://jsfiddle.net/TTU7v/

我们的想法是将脚本尽可能靠近开始正文标记（但在它之后！）：

<script type="text/javascript">
var body = document.getElementsByTagName("body")[0];
body.style.visibility = "hidden";
window.onload = function(){body.style.visibility = "visible";};
</script>

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:

<script type="text/javascript">
var body = document.getElementsByTagName("body")[0];
body.style.visibility = "hidden";
window.onload = function(){body.style.visibility = "visible";};
</script>

回复收藏 0 原文

~没有更多了~