【问题标题】:How to display progress bar until whole aspx page is load?如何在加载整个 aspx 页面之前显示进度条?
【发布时间】:2011-12-23 06:04:49
【问题描述】:

我有一个母版页 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 继承的页面。 所以还有另一个。

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

【问题讨论】:

    标签: javascript jquery asp.net jquery-plugins jquery-events


    【解决方案1】:

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

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

    【讨论】:

      【解决方案2】:

      您可以添加对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 就会加载,一旦页面完成,它就会被设置为不可见。

      我希望这可能会有所帮助!祝你好运。

      【讨论】:

        【解决方案3】:

        你没有提到任何库,所以这里是一个纯 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>
        

        【讨论】:

          猜你喜欢
          • 2017-02-06
          • 1970-01-01
          • 1970-01-01
          • 2014-04-03
          • 2021-05-07
          • 2015-08-31
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多