Jquery添加loading過渡遮罩

這篇文章主要介紹了關於Jquery添加loading過渡遮罩，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

用webpack打包一個h5項目，css也打包在bundle.js裡，載入稍慢就會有幾秒鐘頁面呈現出一個沒有樣式的醜態，所以想設定一個白色遮罩，等js載入完畢消失。
在body中放一個自帶行內樣式（這樣就不必依賴bundle.js裡提供的樣式信息，在第一時間被加載出來）的loading塊。

  <!-- index.html -->
  <p></p>

然後等js載入完之後執行消失的方法，這裡利用animate()的回呼函數，過渡更加自然一些，想要花功夫調的話也有很大空間。

 //index.js(打包后出现在bundle.js里)
  $('#loading').animate({
    opacity: '0'
  }, function () {
    $('#loading').hide()
  })

效果如下

優化之前是這樣，差異還是很大的

以上就是本文的全部內容，希望對大家的學習有幫助，更多相關內容請關注PHP中文網！

相關推薦：

vue 實現數字滾動增加效果

#

以上是Jquery添加loading過渡遮罩的詳細內容。更多資訊請關注PHP中文網其他相關文章！