javascript 如何在 HTML5/CSS3 中完全加载页面之前显示进度条？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21278413/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to show progress bar until the page completely loads in HTML5/CSS3?
提问by Nikhil Tamhankar
I want a Flash website for loading my html5/css3 webpage.
我想要一个 Flash 网站来加载我的 html5/css3 网页。
The page should only appear when it is completely rendered. Before it is displayed, a loading bar must appear.
该页面应仅在完全呈现时出现。在显示之前，必须出现一个加载栏。
How should I do that? Do I need something else apart from HTML5 and CSS3?
我该怎么做？除了 HTML5 和 CSS3 之外，我还需要其他东西吗？
Please provide me with the tutorial.
请给我提供教程。
回答by CodeHacker
Put a div at the beginning of your page (well this is a spinner and not a loading bar... but...)
在页面的开头放置一个 div（这是一个微调器而不是加载栏......但是......）
<div id="work-in-progress">
<div class="work-spinner"></div>
</div>
then using JQuery bind to the load event... which gets fired when the page is loaded
然后使用 JQuery 绑定到加载事件...加载页面时触发
$(window).bind("load", function () {
$('#work-in-progress').fadeOut(100);
});
and add some css to the div to
并将一些 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;
}
@-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);
}
}
回答by camdenl
pimboden's answeris great, but it needs the actual keyframesto animate.
pimboden 的回答很好，但它需要实际的关键帧来制作动画。
Here's the missing CSS:
这是缺少的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);
}
}
回答by Anil Maharjan
If you are using huge number of images and just want your users to wait until they get loaded instead of showing slowly revealing images you can use
如果您使用了大量图像并且只希望您的用户等到它们被加载而不是显示缓慢显示的图像，您可以使用
https://github.com/alexanderdickson/waitForImages
https://github.com/alexanderdickson/waitForImages
Its pretty much all you may want because rest of the page is just text [if its normal size web page]. It will get loaded in no time.
它几乎是您可能想要的，因为页面的其余部分只是文本 [如果是正常大小的网页]。它会立即加载。
回答by Jonas Libbrecht
That's a big question but I can push you in a direction:
这是一个大问题，但我可以将您推向一个方向：
$(window).load(function(){
//initialize after images are loaded
});
Sometimes you want to manipulate/render pictures or webpages. For example you want to verticaly and horizontaly align a picture and you need to get the width and height of the picture in order to do that. With $(document).ready() you won't be able to do that if the visitor doesn't have the image already loaded, in which case you need to initialize the jquery alignment function when the image finishes loading.
有时您想操作/渲染图片或网页。例如，您想要垂直和水平对齐图片，并且您需要获取图片的宽度和高度才能做到这一点。使用 $(document).ready() 如果访问者没有加载图像，您将无法执行此操作，在这种情况下，您需要在图像加载完成后初始化 jquery 对齐功能。
回答by Ian Ryan Clarke
Here may be a step in the right direction:
这可能是朝着正确方向迈出的一步：
http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/
http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/
This only shows the website when everything is loaded!
这仅在加载所有内容时显示网站！
