显示加载图标，直到页面加载？ [英] show loading icon until the page is load?
问题描述
我想向用户显示一个加载图标，直到页面元素完全加载。我如何做到这一点与javascript和我想使用javascript而不是jquery。
这里是一个链接如何谷歌这样做
我如何做到这一点？
触发onload事件或类似这样的东西一些功能。我知道它会做一些像这样或任何其他方式做到吗？
或者有一些事件吗？
UPDATE
我使用display属性隐藏了body元素但是body标签的onload改变了它的属性，但是在哪里放置加载图标并添加更多的交互性。
HTML
< body>
< div id =load>< / div>
< div id =content>
jlkjjlkjlkjlkjlklk
< / div>
< / body>
JS
document.onreadystatechange = function（）{
var state = document.readyState
if（state =='interactive'）{
document.getElementById （'contents'）。style.visibility =hidden;
} else if（state =='complete'）{
setTimeout（function（）{
document.getElementById（'interactive'）;
document.getElementById（'load' ）.style.visibility =hidden;
document.getElementById（'contents'）。style.visibility =visible;
}，1000）;
}
}
CSS
#load {
width：100％;
height：100％;
position：fixed;
z-index：9999;
background：url（https://www.creditmutuel.fr/cmne/fr/banques/webservices/nswr/images/loading.gif）no-repeat center center rgba（0,0,0,0.25 ）
}
注意：
如果您的网页加载速度很快，您将看不到任何加载gif，因此在加载时间较长的网页上使用此代码，我还建议您将 js 放在网页底部。
http://jsfiddle.net/6AcAr/ - 超时（仅适用于演示）
http://jsfiddle.net/47PkH/ - 无超时（实际页面使用）
更新
I wanted to show a loading icon to users until the page elements are fully loaded. How can i do that with javascript and i want to do it with javascript not jquery.
Here is a link how google does it How can i do this? triggering some function on onload event or something like this .. i know it will be done somewhat like this or any other ways to do it? Or there is some event for it?
UPDATE I did something using display property i hide the body element but and onload of body tag i change its property but where to put the loading icon and add more interactivity.
HTML
<body>
<div id="load"></div>
<div id="contents">
jlkjjlkjlkjlkjlklk
</div>
</body>
JS
document.onreadystatechange = function () {
var state = document.readyState
if (state == 'interactive') {
document.getElementById('contents').style.visibility="hidden";
} else if (state == 'complete') {
setTimeout(function(){
document.getElementById('interactive');
document.getElementById('load').style.visibility="hidden";
document.getElementById('contents').style.visibility="visible";
},1000);
}
}
CSS
#load{
width:100%;
height:100%;
position:fixed;
z-index:9999;
background:url("https://www.creditmutuel.fr/cmne/fr/banques/webservices/nswr/images/loading.gif") no-repeat center center rgba(0,0,0,0.25)
}
Note:
you wont see any loading gif if your page is loaded fast, so use this code on a page with high loading time, and i also recommend to put your js on the bottom of the page.
DEMO
http://jsfiddle.net/6AcAr/ - with timeout(only for demo)
http://jsfiddle.net/47PkH/ - no timeout(use this for actual page)
update
这篇关于显示加载图标，直到页面加载？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
