Ng-cloak解决angularJs中的闪烁问题
来源:互联网 发布:js 同级下一个元素 编辑:程序博客网 时间:2024/05/21 17:21
引言
上一篇博客写到了使用ng-bind指令解决页面显示{{express}}问题,这次我们来使用另一种方法解决一下。
在使用angularjs开发评教移动端的时候,我们经常会看见在Chrome这类快速解析的浏览器上会闪过{{express}}。这是由于Javascript去操作DOM,都会等待DOM加载完成之后。同样,anguarjs等DOM加载完成之后才回去解析html,所以浏览器上会出现闪烁的情况。
解决这个问题,其实angularjs给了一个指令——ng-cloak。我们可以在需要的地方加上这个指令就可以。
<span style="font-size:18px;"><!DOCTYPE html><html ng-app><head> <meta charset="utf-8"> <title>ng-bind directive</title></head><body ng-controller="HelloController"><div ng-cloak> <p>直接输出字符串字面值</p> Hello {{"World"}} <hr></div></body><script src="js/angular-1.3.0.js"></script></html></span>
原理
Ng-cloak实现原理为:页面初始化是在DOM的header增加一行css代码。<span style="font-size:18px;"><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></span>
Angualr将带有ng-cloak的元素设置为display:none。等到angularjs解析到带有ng-cloak节点的时候,会把元素上ng-cloak attribute和calss同时remove掉,这样就防止了节点的闪烁。
总结
所有的事情都像老师说的那样:方法总比问题多!
0 0
- Ng-cloak解决angularJs中的闪烁问题
- ng-cloak解决angularJS中的闪烁
- AngularJs加载闪烁问题 ng-cloak
- angular ng-cloak解决屏幕闪烁问题
- AngularJs 应用ng-cloak解决闪屏问题
- angular——ng-bind,ng-cloak,ng-src,ng-href解决AngularJS 代码未加载完而出现显示 AngularJS 代码,进而会有闪烁的效果
- Angularjs 初始化未加载完毕闪烁问题解决 ng-cloak
- ng-bind及ng-cloak解决AngularJs页面加载闪屏问题
- AngularJS ng-cloak 指令
- angularJs中ng-cloak指令
- 【AngularJS】ng-cloak指令页面加载时防闪屏
- ng-cloak
- 【AngularJS】解决ng-if中的ng-model值无效的问题
- 【AngularJS】解决ng-if中的ng-model值无效的问题
- AngularJS解决第一次加载闪烁问题
- 解决AngularJS渲染未完成闪烁问题
- angularJS中的ng-if标签问题
- ng-cloak指令2
- 计算机体系结构
- JVM读书笔记与总结之对象的访问定位
- 宏定义的实现....和拼接
- Java创建,解析XML片段文件,无根节点root
- UED学习网站
- Ng-cloak解决angularJs中的闪烁问题
- 排序
- H2数据库使用
- yii2框架-yii2的asset资源包(十一)
- Eclipse工作空间的删除方法
- NodeJs——(3)和文件(fs)
- 数据库原理(十)--t-sql
- struct2 返回结果类型
- 【C/C++】浅谈sizeof