摘要：用打包一个项目，也打包在里，加载稍慢就会有有几秒钟页面呈现出一个没有样式的丑态，所以想设置一个白色遮罩，等加载完毕消失。然后等加载完之后执行消失的方法，这里利用的回调函数，过渡更加自然一些，想要花功夫调的话也有很大空间。
用webpack打包一个h5项目，css也打包在bundle.js里，加载稍慢就会有有几秒钟页面呈现出一个没有样式的丑态，所以想设置一个白色遮罩，等js加载完毕消失。
在body中放一个自带行内样式（这样就不必依赖bundle.js里提供的样式信息，在第一时间被加载出来）的loading块。
然后等js加载完之后执行消失的方法，这里利用animate()的回调函数，过渡更加自然一些，想要花功夫调的话也有很大空间。
//index.js(打包后出现在bundle.js里)
$("#loading").animate({
opacity: "0"
}, function () {
$("#loading").hide()
})
效果如下
优化之前是这样，差别还是很大的
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/116813.html
摘要：用打包一个项目，也打包在里，加载稍慢就会有有几秒钟页面呈现出一个没有样式的丑态，所以想设置一个白色遮罩，等加载完毕消失。然后等加载完之后执行消失的方法，这里利用的回调函数，过渡更加自然一些，想要花功夫调的话也有很大空间。 用webpack打包一个h5项目，css也打包在bundle.js里，加载稍慢就会有有几秒钟页面呈现出一个没有样式的丑态，所以想设置一个白色遮罩，等js加载完毕消失。...
摘要：前言优化又是优化切图崽们作为整个应用的纽带，连接着用户行为和机器性能而优化的最终意义，在于在这两者之间取得一个最佳的平衡点对于图片资源的加载来说，更是如此今天我们就来简单说说，项目开发中常见的图片加载优化方式预加载遮罩大法我们经常用中实际上 前言 优化！ 又是优化！ 切图崽们作为整个web应用的纽带，连接着用户行为和机器性能. 而优化的最终意义，在于在这两者之间取得一个最佳的平衡点. ...
摘要：前言优化又是优化切图崽们作为整个应用的纽带，连接着用户行为和机器性能而优化的最终意义，在于在这两者之间取得一个最佳的平衡点对于图片资源的加载来说，更是如此今天我们就来简单说说，项目开发中常见的图片加载优化方式预加载遮罩大法我们经常用中实际上 前言 优化！ 又是优化！ 切图崽们作为整个web应用的纽带，连接着用户行为和机器性能. 而优化的最终意义，在于在这两者之间取得一个最佳的平衡点. ...
摘要：前言优化又是优化切图崽们作为整个应用的纽带，连接着用户行为和机器性能而优化的最终意义，在于在这两者之间取得一个最佳的平衡点对于图片资源的加载来说，更是如此今天我们就来简单说说，项目开发中常见的图片加载优化方式预加载遮罩大法我们经常用中实际上 前言 优化！ 又是优化！ 切图崽们作为整个web应用的纽带，连接着用户行为和机器性能. 而优化的最终意义，在于在这两者之间取得一个最佳的平衡点. ...
阅读 1038·2021-11-18 13:23
阅读 745·2021-11-08 13:16
阅读 854·2021-10-11 10:58
阅读 3509·2021-09-22 15:26
阅读 1730·2021-09-08 10:42
阅读 1806·2021-09-04 16:45
阅读 1732·2019-08-30 15:54
阅读 2563·2019-08-30 13:45
