有时如果一个网页里的内容比较多，比如图片比较多而且大，那么网页的显示效果是一点一点加载显示，看着很卡的感觉，这样用户体验会比较差。
如果能在网页加载页面内容的时候，显示一个进度条或者提示loading加载中或者其他内容，等页面加载完成后再显示网页内容，那么能在一定程度上减少访客的等待焦虑感，提升用户体验，降低网站的跳出率。
作者在帮客户制作网站中，偶然发现了一个这种插件，基于jquery的，几行代码即可实现效果，特分享出来，作为以后备用，也希望能帮上对这块感兴趣的朋友。
1、loading效果的html部分这样写，就几个div标签
<div id="preloader"> <div class="jumper"> <div></div> <div></div> <div></div> </div> </div>
2、loading效果的js部分这样写
$(function(){
$(window).on('load', function() {
$("#preloader").animate({
'opacity': '0'
}, 600, function() {
setTimeout(function() {
$("#preloader").css("visibility", "hidden").fadeOut();
}, 300);
});
});
})
3、loading效果的css部分这样写即可
#preloader {
overflow:hidden;
background-image:linear-gradient(135deg,#a759d1 0%,#2196F3 100%);
left:0;
right:0;
top:0;
bottom:0;
position:fixed;
z-index:9999;
color:#fff
}
#preloader .jumper {
left:0;
top:0;
right:0;
bottom:0;
display:block;
position:absolute;
margin:auto;
width:50px;
height:50px
}
#preloader .jumper>div {
background-color:#fff;
width:10px;
height:10px;
border-radius:100%;
-webkit-animation-fill-mode:both;
animation-fill-mode:both;
position:absolute;
opacity:0;
width:50px;
height:50px;
-webkit-animation:jumper 1s 0s linear infinite;
animation:jumper 1s 0s linear infinite
}
#preloader .jumper>div:nth-child(2) {
-webkit-animation-delay:.33333s;
animation-delay:.33333s
}
#preloader .jumper>div:nth-child(3) {
-webkit-animation-delay:.66666s;
animation-delay:.66666s
}
@-webkit-keyframes jumper {
0% {
opacity:0;
-webkit-transform:scale(0);
transform:scale(0)
}
5% {
opacity:1
}
100% {
-webkit-transform:scale(1);
transform:scale(1);
opacity:0
}
}@keyframes jumper {
0% {
opacity:0;
-webkit-transform:scale(0);
transform:scale(0)
}
5% {
opacity:1
}
100% {
opacity:0
}
}
可以把js和css部分放到文件中，然后作为一个preloader插件，然后引用即可
感兴趣的朋友可以下载试试：
如果网页内容还没加载完毕，最终呈现loading效果如下：
