网页加载缓慢时，两种方法实现loading效果

当页面加载速度很慢的时候，页面就会出现白屏的状况，如果没有使用loading来和用户进行交互，用户并不知道应用到底是出现什么问题（卡死、出错或者在加载）页面加载所需要时间越长，那么可能损失的用户量就会多。

第一种方法，可以在页面中放置一个GIF图片

 

<div class="scrollbox">

<image class="imagebar" src="../static/images/time.gif"></image>

</div>

当ajax获取数据成功时，在js中控制显示隐藏即可。

第二种方法，在页面中自定义一个loading 的样式 （自己项目中为 蓝色点点上下翻滚）

/*js中创建loading*/
function fnCreatLoading(){
    var _warp = $('<div class="wrapp_loading"></div>');
    $(_warp).html('<div class="k-line k-line11-1"></div>'
        +'<div class="k-line k-line11-2"></div>'
        +'<div class="k-line k-line11-3"></div>'
        +'<div class="k-line k-line11-4"></div>'
        +'<div class="k-line k-line11-5"></div>');
    $('body').append(_warp);
}

 

/*******************loading  css样式****************/
.wrapp_loading {
  position: fixed;
  top: 50%;
  left: 50%;
  height: 100px;
  margin: 0 10px 10px 0;
  padding: 20px 20px 20px;
  border-radius: 5px;
  text-align: center;
}
.k-line {
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 15px;
  background: #01fef9;
  /* background-color:#4b9cdb */
}
.k-line11-1 {
  animation: k-loadingP 2s infinite;
}
.k-line11-2 {
  animation: k-loadingP 2s infinite;
  animation-delay: 0.15s;
}
.k-line11-3 {
  animation: k-loadingP 2s infinite;
  animation-delay: 0.3s;
}
.k-line11-4 {
  animation: k-loadingP 2s infinite;
  animation-delay: 0.45s;
}
.k-line11-5 {
  animation: k-loadingP 2s infinite;
  animation-delay: 0.6s;
}
@keyframes k-loadingP {
  0% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    /* Safari and Chrome */
    -moz-transform: translateY(0);
    /* Firefox */
    -o-transform: translateY(0);
    /* Opera */
  }
  35% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    /* Safari and Chrome */
    -moz-transform: translateY(0);
    /* Firefox */
    -o-transform: translateY(0);
    /* Opera */
    opacity: 0.3;
  }
  50% {
    transform: translateY(-20px);
    -webkit-transform: translateY(-20px);
    /* Safari and Chrome */
    -moz-transform: translateY(-20px);
    /* Firefox */
    -o-transform: translateY(-20px);
    /* Opera */
    opacity: 0.8;
  }
  70% {
    transform: translateY(3px);
    -webkit-transform: translateY(3px);
    /* Safari and Chrome */
    -moz-transform: translateY(3px);
    /* Firefox */
    -o-transform: translateY(3px);
    /* Opera */
    opacity: 0.8;
  }
  85% {
    transform: translateY(-3px);
    -webkit-transform: translateY(-3px);
    /* Safari and Chrome */
    -moz-transform: translateY(-3px);
    /* Firefox */
    -o-transform: translateY(-3px);
    /* Opera */
  }
}

 

js 页面加载数据时，这样写：

 function fnSearch(){
       fnCreatLoading();
       document.body.style.cursor = "wait";

      searchjson.search=$(".iptsearch").val();
    $.ajax({
      url:'/movecheck/getCheckInfo',
      data:searchjson,
      type:'post',
      success:function(dt){
          $('#pagination').attr('data-isall',"");
         $(document).find('.wrapp_loading').remove();
           if(document.body.style.cursor === "wait"){
               document.body.style.cursor = "default";
          }
        $('.js-rowall').prop('checked',false);
        fnCreateTable(dt);
        if(dt.data.length == 0){
          $('.moveinnerTbody').html('');
          var oTr = $('<tr></tr>');
          oTr.html(`
              <td colspan="7" class="">抱歉，没有查询到数据</td>
          `);
          $('.moveinnerTbody').append(oTr);
          $('#pagination').html('');
        }
      },
      error:function(dt){
        createPrompt('error','抱歉，没有查询到数据!',true);
      }
    })
  }