【Jquery】增加loading过渡遮罩

2019年8月21日 201次阅读 来源: Brown

用webpack打包一个h5项目，css也打包在bundle.js里，加载稍慢就会有有几秒钟页面呈现出一个没有款式的丑态，所以想设置一个白色遮罩，等js加载终了消逝。
在body中放一个自带行内款式（如许就没必要依靠bundle.js里供应的款式信息，在第一时间被加载出来）的loading块。

  <!-- index.html -->
  <div id="loading" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: #fff; opacity: 1; z-index: 9999;"></div>

然后等js加载完以后实行消逝的要领，这里应用animate()的回调函数，过渡越发天然一些，想要花工夫调的话也有很大空间。

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

结果以下
《【Jquery】增加loading过渡遮罩》

优化之前是如许，差异照样很大的
《【Jquery】增加loading过渡遮罩》

    原文作者：Brown
    原文地址: https://segmentfault.com/a/1190000015492706
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞