如何在HTML5/CSS3中显示进度条，直到页面完全加载？

Question

我需要一个Flash网站来加载我编写的HTML5/CSS3网页。

在页面完全渲染之前，它应该只出现一个加载栏。

我应该如何做呢？除了HTML5和CSS3，我还需要其他东西吗？

请为我提供教程。

- Nikhil Tamhankar

---

不，Stack Overflow不是一个代码/教程请求网站。请使用Google。 - Andy Holmes

来吧！谷歌会把你带到 Codeplex 或 StackOverflow！如果你有答案，为什么不帮助别人呢？你想把所有的知识都留给自己吗？分享它！这能让你快乐！ - CodeHacker

Answer 1

在你的页面开头放置一个div（这是一个旋转图标，而不是一个加载条...但是...）

    <div id="work-in-progress">
        <div class="work-spinner"></div>
    </div>

然后使用JQuery绑定到加载事件...当页面加载时触发。

  $(window).bind("load", function () {
        $('#work-in-progress').fadeOut(100);
    });

并为div添加一些css样式

#work-in-progress {
  position: fixed;
  width: 100%;
  height: 100%;
  font-size: 150px;
  text-align: center;
  vertical-align: middle;
  color: #000000;
  z-index: 200000;
  background-color: #FFFFFF;
}

.work-spinner {
  background-color: rgba(0,0,0,0);
  border: 9px solid rgba(27,61,226,0.9);
  opacity: .9;
  border-left: 5px solid rgba(0,0,0,0);
  border-radius: 120px;
  -webkit-box-shadow: 0 0 35px #1B3DE2;
  box-shadow: 0 0 35px #1B3DE2;
  width: 100px;
  height: 100px;
  margin: 0 auto;
  -moz-animation: spin .5s infinite linear;
  -webkit-animation: spin .5s infinite linear;
  -o-animation: spin .5s infinite linear;
  animation: spin .5s infinite linear;
}

@-moz-keyframes spin {
 from {
     -moz-transform: rotate(0deg);
 }
 to {
     -moz-transform: rotate(360deg);
 }
}

@-webkit-keyframes spin {
 from {
     -webkit-transform: rotate(0deg);
 }
 to {
     -webkit-transform: rotate(360deg);
 }
}

@keyframes spin {
 from {
     transform: rotate(0deg);
 }
 to {
     transform: rotate(360deg);
 }
}
@-o-keyframes spin {
 from {
     transform: rotate(0deg);
 }
 to {
     transform: rotate(360deg);
 }
}

- CodeHacker

---

太棒了。所以，基本上除非页面加载完成，否则旋转器将继续旋转。但它不会显示百分比，对吗？ - Nikhil Tamhankar

是的，因为我不知道页面已经加载了多少“百分比”。而且我不想出现“微软”式的：“99%完成2 30秒……呵呵。” - CodeHacker

@pimboden 我正在实现一个预加载器，用于我使用HTML、PHP和JavaScript开发的FB画布游戏之一。游戏代码是单个索引文件，它有多个“div”和单个“div”上的多个提交按钮。每个提交按钮从数据库中获取数据并在相应的“div”上加载数据。当用户点击任何一个提交按钮时，它会执行预加载程序，但是我希望只在游戏开始时显示预加载程序，而不是每次用户单击提交按钮时都显示。我知道提交按钮每次用户单击提交按钮时都会重新加载（刷新）索引文件。 - sanjay

Answer 2

pimboden的回答很棒，但需要实际的关键帧来进行动画。

下面是缺失的CSS代码:

@-moz-keyframes spin {
     from {
         -moz-transform: rotate(0deg);
     }
     to {
         -moz-transform: rotate(360deg);
     }
 }

 @-webkit-keyframes spin {
     from {
         -webkit-transform: rotate(0deg);
     }
     to {
         -webkit-transform: rotate(360deg);
     }
 }

 @keyframes spin {
     from {
         transform: rotate(0deg);
     }
     to {
         transform: rotate(360deg);
     }
 }
 @-o-keyframes spin {
     from {
         transform: rotate(0deg);
     }
     to {
         transform: rotate(360deg);
     }
 }

- camdenl

---

哦...经过这么多年...但是真的! - CodeHacker

Answer 3

如果您使用了大量图像，只希望用户等待图像加载完成而不是显示缓慢逐渐显现图像，则可以使用。

https://github.com/alexanderdickson/waitForImages

这基本上是您所需要的，因为页面的其余部分只是文本[如果它是普通大小的网页]。它将在瞬间加载。

- Anil Maharjan

Answer 4

这可能是朝着正确方向迈出的一步：

http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/

只有在所有内容加载完成后，才会显示该网站！

- Ian Ryan Clarke

Answer 5

这是一个很大的问题，但我可以指导你朝一个方向前进：

$(window).load(function(){  
//initialize after images are loaded  
});  

有时您希望操作/渲染图片或网页。例如，您想要垂直和水平对齐一张图片，您需要获取图片的宽度和高度才能做到这一点。如果访问者尚未加载图像，则使用 $(document).ready() 您将无法完成此操作，此时您需要在图像完成加载时初始化jquery对齐函数。

- Jonas Libbrecht