Sky*_*Sky 21 html javascript css
我想向用户显示加载图标,直到页面元素完全加载.我怎么能用javascript做到这一点,我想用javascript,而不是jquery？
这是google如何做的链接我该怎么做？在onload事件或类似的东西上触发一些函数..我知道它会像这样或其他任何方式做到这一点吗？或者有一些事件呢？
更新 我使用display属性做了一些事情我隐藏了body元素但是body标签的onload我更改了它的属性但是在哪里放置加载图标并添加更多的交互性.
Vis*_*ent 54
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)
}
注意:
如果您的页面加载速度很快,您将看不到任何加载gif,因此在加载时间较长的页面上使用此代码,我还建议将您的js放在页面底部.
DEMO
http://jsfiddle.net/6AcAr/ - 超时(仅用于演示)
http://jsfiddle.net/47PkH/ - 无超时(用于实际页面)
更新
小智 5
将装载程序放入网站的最简单方法。
HTML：
<div id="loading"></div>
CSS：
#loading {
position: fixed;
width: 100%;
height: 100vh;
background: #fff url('images/loader.gif') no-repeat center center;
z-index: 9999;
}
JQUERY：
<script>
jQuery(document).ready(function() {
jQuery('#loading').fadeOut(3000);
});
</script>