Javascript 在加载整个页面之前显示加载栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11072759/
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
Display a loading bar before the entire page is loaded
提问by Key-Six
I would like to display a loading bar before the entire page is loaded. For now, I'm just using a small delay:
我想在加载整个页面之前显示一个加载栏。现在，我只是使用一个小的延迟：
$(document).ready(function(){
$('#page').fadeIn(2000);
});
The page already uses jQuery.
该页面已经使用 jQuery。
Note: I have tried this, but it didn't work for me:
注意：我试过这个，但它对我不起作用：
I also tried other solutions. In most cases, the page loads as usual, or the page won't load/display at all.
我也尝试了其他解决方案。在大多数情况下，页面会像往常一样加载，或者页面根本不会加载/显示。
Thank you for any help.
感谢您的任何帮助。
回答by Roko C. Buljan
Use a div #overlaywith your loading info / .gif that will cover all your page:
使用#overlay带有加载信息 / .gif的 div来覆盖所有页面：
<div id="overlay">
<img src="loading.gif" alt="Loading" />
Loading...
</div>
jQuery:
jQuery：
$(window).load(function(){
// PAGE IS FULLY LOADED
// FADE OUT YOUR OVERLAYING DIV
$('#overlay').fadeOut();
});
Here's an example with a Loading bar:
这是一个带有加载栏的示例：
<div id="overlay">
<div id="progstat"></div>
<div id="progress"></div>
</div>
<div id="container">
<img src="http://placehold.it/3000x3000/cf5">
</div>
CSS:
CSS：
*{margin:0;}
body{ font: 200 16px/1 sans-serif; }
img{ width:32.2%; }
#overlay{
position:fixed;
z-index:99999;
top:0;
left:0;
bottom:0;
right:0;
background:rgba(0,0,0,0.9);
transition: 1s 0.4s;
}
#progress{
height:1px;
background:#fff;
position:absolute;
width:0; /* will be increased by JS */
top:50%;
}
#progstat{
font-size:0.7em;
letter-spacing: 3px;
position:absolute;
top:50%;
margin-top:-40px;
width:100%;
text-align:center;
color:#fff;
}
JavaScript:
JavaScript：
;(function(){
function id(v){ return document.getElementById(v); }
function loadbar() {
var ovrl = id("overlay"),
prog = id("progress"),
stat = id("progstat"),
img = document.images,
c = 0,
tot = img.length;
if(tot == 0) return doneLoading();
function imgLoaded(){
c += 1;
var perc = ((100/tot*c) << 0) +"%";
prog.style.width = perc;
stat.innerHTML = "Loading "+ perc;
if(c===tot) return doneLoading();
}
function doneLoading(){
ovrl.style.opacity = 0;
setTimeout(function(){
ovrl.style.display = "none";
}, 1200);
}
for(var i=0; i<tot; i++) {
var tImg = new Image();
tImg.onload = imgLoaded;
tImg.onerror = imgLoaded;
tImg.src = img[i].src;
}
}
document.addEventListener('DOMContentLoaded', loadbar, false);
}());
回答by Okan Kocyigit
HTML
HTML
<div class="preload">
<img src="http://i.imgur.com/KUJoe.gif">
</div>
<div class="content">
I would like to display a loading bar before the entire page is loaded.
</div>
JAVASCRIPT
爪哇脚本
$(function() {
$(".preload").fadeOut(2000, function() {
$(".content").fadeIn(1000);
});
});?
CSS
CSS
.content {display:none;}
.preload {
width:100px;
height: 100px;
position: fixed;
top: 50%;
left: 50%;
}
?
DEMO
演示
回答by Inamur Rahman
Whenever you try to load any data in this window this gif will load.
每当您尝试在此窗口中加载任何数据时，都会加载此 gif。
HTML
HTML
Make a Div
制作一个 Div
<div class="loader"></div>
CSS.
CSS。
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('https://lkp.dispendik.surabaya.go.id/assets/loading.gif') 50% 50% no-repeat rgb(249,249,249);
jQuery
jQuery
$(window).load(function() {
$(".loader").fadeOut("slow");
});
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
