我想向用户显示一个加载图标，直到页面元素完全加载。我怎样才能用 javascript 做到这一点，并且我想用 javascript 而不是 jquery 做到这一点？
Here https://www.googlesciencefair.com/en/是一个链接，谷歌是如何做到这一点的
我怎样才能做到这一点？
在 onload 事件上触发某些功能或类似的事情..我知道它会像这样完成或有任何其他方式来完成？
或者有什么活动吗？
UPDATE我使用显示属性做了一些事情，我隐藏了 body 元素，但是在 body 标记的 onload 上我更改了它的属性，但是在哪里放置加载图标并添加更多交互性。
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("/loading.gif") no-repeat center center rgba(0,0,0,0.25)
}
Note:
如果您的页面加载速度很快，您将看不到任何加载 gif，因此在加载时间较长的页面上使用此代码，我还建议您将js在页面底部。
DEMO
http://jsfiddle.net/6AcAr/ http://jsfiddle.net/6AcAr/- 有超时（仅用于演示）
http://jsfiddle.net/47PkH/ http://jsfiddle.net/47PkH/- 无超时（将其用于实际页面）
update
http://jsfiddle.net/d9ngT/ http://jsfiddle.net/d9ngT/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
