当前位置: 首页 > Web前端 > HTML5

[Jquery]添加加载过渡掩码

时间:2023-04-05 14:02:06 HTML5

用webpack打包一个h5项目,css也打包在bundle.js中。如果加载慢,页面会出现几秒没有样式的丑陋,所以我想设置一个js加载时白色遮罩消失。在body中放一个加载块,自带内联样式(这样就不用依赖bundle.js中提供的样式信息,会在第一时间加载)。

然后执行js加载后消失的方法。这里使用了animate()的回调函数,让过渡更加自然,想花时间的话还有很大的调整余地。//index.js(打包后出现在bundle.js中)$('#loading').animate({opacity:'0'},function(){$('#loading').hide()})的优化前效果如下,差别还是很大的