此效果的原理:在页面加载完成前在整个页面上边覆盖一层,即loading层,等到页面加载完成后,将loading层隐藏。
此效果的HTML代码部分:在整个代码前,添加div,即loading层(可以添加load的图片,也可以当做背景图写在css里)
<div id="loading">
<img src="images/loading.gif" alt="loading.." />
</div> CSS部分:
#loading {
position: fixed;
z-index: 400;
width: 100%;
height: 100%;
top: 0;
left: 0%;
text-align: center;
font-size: 0.9rem;
color: #595758;
background-color: #ffffff;
}jQuery部分:
jQuery(document).ready(function(){
jQuery(window).load(function(){ //load函数
jQuery("#loading").hide();
});
});
该博客介绍了一个利用jQuery实现的页面加载完成前的loading效果。通过在页面加载时显示一个覆盖全屏的loading层,待页面内容完全加载后,再将其隐藏,为用户提供更好的浏览体验。
7604

被折叠的 条评论
为什么被折叠?



