Question

我想要一个Flash网站来加载我的html5 / css3网页。

页面只应在完全呈现时显示。在显示之前，必须出现一个加载栏。

我该怎么做？除了HTML5和CSS3，我还需要其他东西吗？

请向我提供教程。

Answer 1

在页面的开头放一个div（这是一个微调器而不是加载栏......但是......）

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

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

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

并将一些css添加到div

#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;
}

Answer 2

pimboden's answer很棒，但它需要实际的keyframes来制作动画。

这是缺少的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);
     }
 }

Answer 3

如果您使用的是大量图片，只是希望用户等到加载后再显示缓慢显示的图像，则可以使用

https://github.com/alexanderdickson/waitForImages

它几乎可以满足您的所有要求，因为页面的其余部分只是文本[如果是正常大小的网页]。它会立即加载。

Answer 4

这是一个很大的问题，但我可以向你推动一个方向：

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

有时您想要操纵/渲染图片或网页。例如，你想要垂直和水平对齐图片，你需要获得图片的宽度和高度才能做到这一点。使用$（document）.ready（）如果访问者没有已加载图像，您将无法执行此操作，在这种情况下，您需要在图像完成加载时初始化jquery对齐函数。

Answer 5

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

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

这只会在加载所有内容时显示网站！

如何在HTML5 / CSS3中完全加载页面之前显示进度条？

5 个答案: