jquery网页预加载loading效果实现,非ajax

这个效果的初衷是实现类似app端数据加载完成前的动画,但是实际上用途很广泛,就比如一些页面很庞大的网站加载完成需要很久时间,让用户看着白色屏幕干等着绝对不是办法,如果给一个网页加载完成前的动画显示,在一定程度上能够留住用户。一般来说很多网页都是通过ajax来请求数据,这样情况下对于判断页面是否加载完成则由ajax请求的反馈来做最终决定,甚至可以实时的确认进度,然而现实在于很多网页没有用ajax,所以也根本不需要太复杂的操作。
以下是我在类似app布局的网站上实现的效果代码。

首先定义HTML代码:

<div class="load">
    <div class="load_main">
        <i class="fa fa-spinner fa-spin"></i>
    </div>
</div>

这里引入了Font Awesome图标字体库的旋转效果,其实也可以用过css3或者js自己写旋转,我这里主要节约时间。

再写点css定义样式:

.load{width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:999;
background:#fff;}
.load_main{width:100%;
height:40px;
position:absolute;
top:40%;
text-align:center;
font-size:60px;}
.load_main i{color:#1f8abf}

这些css定义一个全屏覆盖的加载层,并且置于顶部,设置白色背景和蓝色的旋转小球。设置居中并且处于屏幕相对来说中心的位置。

然后写js代码,注意需要引入jquery:

$(window).load(function() {
   $(".load").fadeOut(500);
})

其实对于jQuery常用的新版本,代码应该为:

$(document).ready(function(){
   $(".load").fadeOut(500);
})

这句话其实意思就是判断页面是否加载完成,如果完成则在0.5秒内逐渐隐藏load层。

最终效果如下:
首页.png

发表评论
加载中...

相关文章