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

 

 

 

 

 

转载于:https://www.cnblogs.com/yuesha/articles/9633591.html