網頁加載緩慢時，兩種方法實現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);
      }
    })
  }