前端页面闪烁的问题解决方案
生活随笔
收集整理的這篇文章主要介紹了
前端页面闪烁的问题解决方案
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
平時遇見使用VUE遇見頁面閃爍的問題,總結(jié)了三點希望對以后大家開發(fā)有幫助:
遇見在如Chrome這類能夠快速解析的瀏覽器上出現(xiàn)表達(dá)式({{ express }} ),
或者是模塊(div)的閃爍。對于這個問題由于JavaScript去操作DOM,都會等待DOM加載完成(DOM ready)。
對于vuejs、angularjs這些會在DOM ready完會才回去解析html view Template,所以對于Chrome這類快速的瀏覽器你會看見有閃爍的情況出現(xiàn)。
而對于IE7,8這類解析稍慢的瀏覽器大部分情況下是不會出現(xiàn)這個問題的。
第一種方案:(頁面使用了v-if判斷數(shù)據(jù)情況)
CSS 規(guī)則如 [v-cloak] { display: none } 一起用時,這個指令可以隱藏未編譯的 Mustache 標(biāo)簽直到實例準(zhǔn)備完畢。
<div v-if={{XXX}} v-cloak></div> [v-cloak] {display: none;}第二種方案:(在設(shè)置路由的時候去解決)
路由一: vd/tuan/tuanindex新頁面路由,設(shè)置在同一子路由下vd/tuan/XXXXX第三種方案:(頁面加載時,通過CSS控制)
進(jìn)入下個頁面時,設(shè)置 loading()函數(shù)(展示loading效果),在數(shù)據(jù)接口調(diào)用時,destory.(無論接口是否調(diào)用成功,destory)
總結(jié)
以上是生活随笔為你收集整理的前端页面闪烁的问题解决方案的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 你知道六一也是父母节吗230个
- 下一篇: 伪造浏览器历史记录