ngCloak實現angular初始化閃爍最佳實踐
在做angular的SPA開發時,我們經常會遇見在如Chrome這類能夠快速解析的瀏覽器上出現表示式({% raw %}` express `} {% endraw %}),或者是模組(div)的閃爍。對於這個問題由於JavaScript去操作DOM,都會等待DOM載入完成(DOM ready)。對於angular會在DOM ready完會才回去解析html view Template,所以對於Chrome這類快速的瀏覽器你會看見有閃爍的情況出現。而對於IE7,8這類解析稍慢的瀏覽器大部分情況下是不會出現這個問題的。
在angular中為我們提供了ng-cloak來實現紡織閃爍的方案,我們只需要在需要的地方加上ng-cloak。同時對於bing文字({% raw %}` express `} {% endraw %})我們也可以改為ng-bind來實現避免。
1
2
3
|
< div id = "template1" ng-cloak>{{ `hello` }}</ div >
< div id = "template2" ng-cloak class = "ng-cloak" >{{ `hello IE7` }}</ div >
< div id = "template2" ng-bing = "`hello IE7`" ></ div >
|
angular講ng-cloak實現為一個directive,並會在初始化的時候在DOM的heade增加一行css程式碼,如下:
1
2
|
<style type= "text/css" >@charset "UTF-8" ;[ng:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng- hide { display : none !important ;}ng:form{ display : block ;}.ng-animate-start{ clip :rect( 0 , auto , auto , 0 );-ms-zoom: 1.0001 ;}.ng-animate-active{ clip :rect( -1px , auto , auto , 0 );-ms-zoom: 1 ;}
</style> |
從上面我們可以看見angular將帶有ng-clock的的元素設定為display:none,隱藏掉,在等到angular解析到帶有ng-clock的節點時候,會把attribute和class同時remove掉,這樣就可以實現防止節點的閃爍。
1
2
3
4
5
6
|
var ngCloakDirective = ngDirective({
compile: function (element, attr) {
attr.$set( `ngCloak` , undefined);
element.removeClass( `ng-cloak` );
}
}); |
在angular-bootstrap.js中會看見這樣的程式碼去增加前面所說的css:
1
|
document.write( `<link rel="stylesheet" type="text/css" href="` + serverPath + `../css/angular.css"/>` );
|
好像閃爍的問題好像已經能夠被我解決了,恩是否是這樣的,理論也改如此,但是現實是殘酷的,我們的感性認識經常會被現實一記重重的耳光,我們才能很更深入全面的思考,如果瀏覽器的速度比angular在head中加入css的速度還快呢?我在給公司的一個專案組解決這個閃爍的問題的時候就遇見了這個問題。怎麼辦呢?那我們只能使出我們必殺技,自己把css加入我們的css檔案引入heade,啟動載入,ok這樣就可以完美解決了。(如果你也遇見了加了ng-cloak還不起作用的話,那麼試試直接引入css檔案吧)
到這裡關於ng-cloak的原理和解決方案已經完成,歡迎繼續關注angular的後續經驗篇分享。
本文轉自 破狼 51CTO部落格,原文連結:http://blog.51cto.com/whitewolfblog/1346222,如需轉載請自行聯絡原作者
相關文章
- Flutter——實現閃爍效果Flutter
- 實現閃爍燈星星動畫動畫
- css3實現動畫閃爍效果CSSS3動畫
- 協程實現canvas影像隨機閃爍Canvas隨機
- [譯] 在 Flutter 中實現微光閃爍效果Flutter
- 教你如何用WPF實現文字粒子閃爍動畫效果動畫
- 例項式探索Angular5最佳實踐Angular
- 簡單CSS實現閃爍動畫(+1白話講解)CSS動畫
- js點選div實現閃爍效果程式碼例項JS
- javascript實現的div塊閃爍效果程式碼例項JavaScript
- 1、51微控制器實現LED燈的閃爍
- 實現容器安全管理的最佳實踐
- vuejs在解析時出現閃爍的原因及防止閃爍的方法VueJS
- 分散式鎖實現原理與最佳實踐分散式
- Angular生命週期實踐Angular
- js閃爍效果JS
- Pika最佳實踐
- Flutter 最佳實踐Flutter
- MongoDB 最佳實踐MongoDB
- 《.NET最佳實踐》
- Django 最佳實踐Django
- metaq最佳實踐
- Iptables 最佳實踐 !
- Java最佳實踐Java
- Kafka最佳實踐Kafka
- Log最佳實踐
- SnapKit 最佳實踐APK
- MacBook 最佳實踐Mac
- viewport 最佳實踐View
- ViewPager最佳實踐Viewpager
- OpenResty最佳實踐REST
- PHP最佳實踐PHP
- MongoDB最佳實踐MongoDB
- JDBC 最佳實踐JDBC
- JavaScript 最佳實踐JavaScript
- 建立現代npm包的最佳實踐NPM
- Flutter 混合開發實戰問題記錄(一)FlutterView閃爍FlutterView
- Istio最佳實踐系列:如何實現方法級呼叫跟蹤?