前端页面闪烁的问题解决方案
平时遇见使用VUE遇见页面闪烁的问题,总结了三点希望对以后大家开发有帮助:遇见在如Chrome这类能够快速解析的浏览器上出现表达式({{ express }} ),或者是模块(div)的闪烁。对于这个问题由于JavaScript去操作DOM,都会等待DOM加载完成(DOM ready)。对于vuejs、angularjs这些会在DOM ready完会才回去解析html view Template
·
平时遇见使用VUE遇见页面闪烁的问题,总结了三点希望对以后大家开发有帮助:
遇见在如Chrome这类能够快速解析的浏览器上出现表达式({{ express }} ),
或者是模块(div)的闪烁。对于这个问题由于JavaScript去操作DOM,都会等待DOM加载完成(DOM ready)。
对于vuejs、angularjs这些会在DOM ready完会才回去解析html view Template,所以对于Chrome这类快速的浏览器你会看见有闪烁的情况出现。
而对于IE7,8这类解析稍慢的浏览器大部分情况下是不会出现这个问题的。
第一种方案:(页面使用了v-if判断数据情况)
CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
<div v-if={{XXX}} v-cloak></div>
[v-cloak] {
display: none;
}
第二种方案:(在设置路由的时候去解决)
路由一:
vd/tuan/tuanindex
新页面路由,设置在同一子路由下
vd/tuan/XXXXX
第三种方案:(页面加载时,通过CSS控制)
进入下个页面时,设置 loading()函数(展示loading效果),在数据接口调用时,destory.(无论接口是否调用成功,destory)
更多推荐
已为社区贡献67条内容
所有评论(0)