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);
})