preloader预加载效果，页面内容没下载完显示loading加载中，页面加载完成后再显示网页内容-趣啦吧

有时如果一个网页里的内容比较多，比如图片比较多而且大，那么网页的显示效果是一点一点加载显示，看着很卡的感觉，这样用户体验会比较差。

如果能在网页加载页面内容的时候，显示一个进度条或者提示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插件，然后引用即可