Question

我有一个母版页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上没有body，它在root.master上，如果我们把它放在root.master上，它会应用从root.master继承的所有页面。所以还有另外一个。

请建议我使用链接或样本。

Answer 1

如果您使用的是jQuery，则可以在示例中使用

，您可以对代码进行以下重新分解

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

this tutorial might helpful to you for create custom progress bar。由于这是第三方教程，我不打算将内容复制到此处。

try this demo

Answer 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加载，一旦页面完成，它就被设置为不可见。

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

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

如何在加载整个aspx页面之前显示进度条？

3 个答案: