更新时间:2022-08-21 20:17:25
为了获得更好的用户体验,现在大多数网页都会在页面中加一个加载中效果,这里实现一个加载中逐渐消失的效果,以至于看上去不那么生硬。
html:
1
|
< div id = "loading" >< img src = "images/common/loading.gif" alt = "" ></ div >
|
css:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
/*加载中*/ #loading{ position : fixed ;
top : 0 ;
left : 0 ;
width : 100% ;
height : 100% ;
background-color : #333 ;
z-index : 2000 ;
opacity: 1 ;
}#loading img{ width : 400px ;
height : 300px ;
position : absolute ;
top : 50% ;
left : 50% ;
margin-top : -150px ;
margin-left : -200px ;
z-index : 2001 ;
} |
这里的加载中为一个gif的动态图,相对css,要更简单好用,多样化,但是gif图片容易太大,导致图片加载过慢,所以要到网上找一些在线压缩图片的地方压缩一下,尽可能不失真的情况下减小体积。
js:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<script> //loading加载中 //监听加载状态改变 document.onreadystatechange = completeLoading; //加载状态为complete时移除loading效果
function completeLoading() {
if (document.readyState == "complete" ) {
$( "#loading" ).animate({
"opacity" : "0"
},500).hide(1000);
}
}
</script> |
给加载中效果默认opacity设为1,逐渐消失的效果则把opacity变为0,但是元素在页面中不消失,这样会影响页面其他元素的点击使用,所以要把元素隐藏掉。