Jquery添加loading过渡遮罩
程序员文章站
2022-04-02 21:01:39
...
这篇文章主要介绍了关于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() })
效果如下
优化之前是这样,差别还是很大的
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!
相关推荐:
以上就是Jquery添加loading过渡遮罩的详细内容,更多请关注其它相关文章!
上一篇: F 快速缓存改造版