Jquery添加loading过渡遮罩

这篇文章主要介绍了关于Jquery添加loading过渡遮罩，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

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

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

登录后复制

然后等js加载完之后执行消失的方法，这里利用animate()的回调函数，过渡更加自然一些，想要花功夫调的话也有很大空间。

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

登录后复制

效果如下
Jquery添加loading过渡遮罩-LMLPHP

优化之前是这样，差别还是很大的
Jquery添加loading过渡遮罩-LMLPHP

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注Work网！