Jquery添加loading过渡遮罩

来源：动视网责编：小采时间：2020-11-27 19:34:00

Jquery添加loading过渡遮罩

Jquery添加loading过渡遮罩:这篇文章主要介绍了关于Jquery添加loading过渡遮罩，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下用webpack打包一个h5项目，css也打包在bundle.js里，加载稍慢就会有有几秒钟页面呈现出一个没有样式的丑态，所以想设置一个白色遮罩，等j

推荐度：

点击下载本文 文档为doc格式

导读Jquery添加loading过渡遮罩:这篇文章主要介绍了关于Jquery添加loading过渡遮罩，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下用webpack打包一个h5项目，css也打包在bundle.js里，加载稍慢就会有有几秒钟页面呈现出一个没有样式的丑态，所以想设置一个白色遮罩，等j

这篇文章主要介绍了关于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过渡遮罩

推荐度：

点击下载本文 文档为doc格式

标签： load 遮罩 loading

热门焦点

Jquery添加loading过渡遮罩

Jquery添加loading过渡遮罩

Jquery添加loading过渡遮罩

最新推荐

猜你喜欢

热门推荐