AngularJS使用ng-Cloak阻止初始化闪烁问题的方法


Posted in Javascript onNovember 03, 2016

本文实例讲述了AngularJS使用ng-Cloak阻止初始化闪烁问题的方法。分享给大家供大家参考,具体如下:

在做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来实现避免。

<div id="template1" ng-cloak>{{ 'hello' }}</div>
<div id="template2" ng-cloak class="ng-cloak">{% raw %} {{ 'hello IE7' }} {% endraw %} </div>
<div id="template2" ng-bing="'hello IE7'"></div>

angular将ng-cloak实现为一个directive,并会在初始化的时候在DOM的heade增加一行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;}

从上面我们可以看见angular将带有ng-clock的的元素设置为display:none,隐藏掉,在等到angular解析到带有ng-clock的节点时候,会把attribute和class同时remove掉,这样就可以实现防止节点的闪烁。

var ngCloakDirective = ngDirective({
   compile: function(element, attr) {
    attr.$set('ngCloak', undefined);
    element.removeClass('ng-cloak');
   }
});

在angular-bootstrap.js中会看见这样的代码去增加前面所说的css:

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的原理和解决方案已经完成。

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
JS效率个人经验谈(8-15更新),加入range技巧
Jan 09 Javascript
js注意img图片的onerror事件的分析
Jan 01 Javascript
JS中如何设置readOnly的值
Dec 25 Javascript
js触发onchange事件的方法说明
Mar 08 Javascript
JS辨别访问浏览器判断是android还是ios系统
Aug 19 Javascript
浅谈javascript 函数属性和方法
Jan 21 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
Oct 13 Javascript
微信小程序表单弹窗实例
Jul 19 Javascript
详解使用element-ui table组件的筛选功能的一个小坑
Nov 02 Javascript
微信小程序订阅消息(java后端实现)开发
Jun 01 Javascript
node中使用shell脚本的方法步骤
Mar 23 Javascript
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 jQuery
Vue.js实现无限加载与分页功能开发
Nov 03 #Javascript
vue自定义指令实现v-tap插件
Nov 03 #Javascript
angular ngClick阻止冒泡使用默认行为的方法
Nov 03 #Javascript
vue.js指令v-for使用及索引获取
Nov 03 #Javascript
vue.js初学入门教程(1)
Nov 03 #Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
Nov 03 #Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
Nov 03 #Javascript
You might like
PHP has encountered an Access Violation 错误的解决方法
2010/01/17 PHP
php 静态变量与自定义常量的使用方法
2010/01/26 PHP
PHP中spl_autoload_register()和__autoload()区别分析
2014/05/10 PHP
javascript实现的网页局布刷新效果
2008/12/01 Javascript
jQuery LigerUI 使用教程入门篇
2012/01/18 Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
2013/05/07 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
2014/05/27 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
2015/11/17 Javascript
Webpack 实现 AngularJS 的延迟加载
2016/03/02 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
2016/07/18 Javascript
微信小程序 开发指南详解
2016/09/27 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
2016/10/10 Javascript
js+div+css下拉导航菜单完整代码分享
2016/12/28 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
2018/07/23 Javascript
Bootstrap模态对话框中显示动态内容的方法
2018/08/10 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
2019/07/06 Javascript
分享一款超好用的JavaScript 打包压缩工具
2020/04/26 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
2020/09/04 Javascript
使用Python设计一个代码统计工具
2018/04/04 Python
详解Python中的四种队列
2018/05/21 Python
Python3 SSH远程连接服务器的方法示例
2018/12/29 Python
Django之使用celery和NGINX生成静态页面实现性能优化
2019/10/08 Python
Python列表操作方法详解
2020/02/09 Python
Python文件操作模拟用户登陆代码实例
2020/06/09 Python
浅谈matplotlib中FigureCanvasXAgg的用法
2020/06/16 Python
django rest framework 过滤时间操作
2020/07/12 Python
python drf各类组件的用法和作用
2021/01/12 Python
python利用文件时间批量重命名照片和视频
2021/02/09 Python
Mistine官方海外旗舰店:泰国国民彩妆品牌
2016/12/28 全球购物
windeln官方海外旗舰店:德淘超人气母婴超市
2017/12/15 全球购物
巴黎一票通:The Paris Pass
2018/02/10 全球购物
伦敦一卡通:The London Pass
2018/11/30 全球购物
不拖欠农民工工资承诺书
2014/03/31 职场文书
亲子活动总结
2014/04/26 职场文书
python turtle绘制多边形和跳跃和改变速度特效
2022/03/16 Python
NoSQL优缺点与MongoDB数据库简介
2022/06/05 MongoDB