显示加载图标,直到页面加载? [英] 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屋!