文档章节

Angular 初始化闪烁之解决方案

梅气灶
 梅气灶
发布于 2015/12/07 17:22
字数 802
阅读 77
收藏 3

我们在运用angular做SPA的时候,我们偶尔会出现表达式{{templatecontent}}或者是模块(div)闪烁的情况,而这类问题主要是出现在类如Chrome这类能快速解析的浏览器上。这是因为由于javascript去操作DOM,都会等待DOM加载完成(即 DOM ready)。对于angular而言,会在dom ready完成之后才回去解析html view template,所以会看到有闪烁的情况出现。而对于IE 7 8这类解析速度比较慢的浏览器而言,大部分情况你是看不到这样的情况的(好吧,突然发现巨坑的IE系列居然还有这样的好处,哈哈)。

基本angular数据显示写法:

<div>{ {templatecontent} }</div>

这样的写法大部分时候是没有问题的,但是在Chrome浏览器中偶尔会出现闪烁的情况。下面介绍两种解决方案:

方法一:

<div ng-bind="templatecontent"></div>

把模板内容直接绑定到ng-bind上,这样可以避免闪烁的情况出现

方法二:

<div ng-cloak>{ {templatecontent} }</div>
<div ng-cloak class="ng-cloak">{ {templatecontent} }</div>

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

从上面的CSS代码可以看见angular将带有ng-cloak的元素设置为:display:none隐藏掉,在等到angular解析到带有ng-cloak的节点时,会把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文件吧)

© 著作权归作者所有

共有 人打赏支持
梅气灶
粉丝 30
博文 15
码字总数 20372
作品 0
杭州
前端工程师
私信 提问
AngularJS页面加载闪烁解决方案

AngularJS这个大杀器使得实现SPA(Single Page App)变得异常的简单,其双向绑定让页面内容的重新渲染无需编写大量JS代码,无需构造DOM字符串丑陋的,作为需要快速迭代,提高用户体现的下一代...

空心大白菜
2015/05/07
0
3
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
11/09
0
0
Angular 1 vs. Angular 2 深度比较

AngularJS 2 尽管还在Alpha阶段,但主要功能和文档已经发布。让我我们了解下Angular 1 和 2 的区别,以及新的设计目标将如何实现。 Angular 2 当前仍处于 Alpha/开发预览阶段,但是主要功能和...

oschina
2015/10/14
41.2K
36
OSChina 技术专题之 AngularJS 更新版(201412)

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

OSC编辑部
2014/10/17
11.1K
26
怎么解决Bower下载的依赖包不同机器不同版本

前端我用Bower去管理依赖项。 在执行bower install时我下载的依赖包的结构都比较规范。 注:bower.json是一样的 例如 我的目录结构 bower_components/angular/angular.js 其他机器bower ins...

刘成万
2015/11/12
310
1

没有更多内容

加载失败,请刷新页面

加载更多

Spring源码学习笔记-1-Resource

打算补下基础,学习下Spring源码,参考书籍是《Spring源码深度解析》,使用版本是Spring 3.2.x,本来想试图用脑图记录的,发现代码部分不好贴,还是作罢,这里只大略记录下想法,不写太细了 ...

zypy333
今天
10
0
RestClientUtil和ConfigRestClientUtil区别说明

RestClientUtil directly executes the DSL defined in the code. ConfigRestClientUtil gets the DSL defined in the configuration file by the DSL name and executes it. RestClientUtil......

bboss
今天
17
0

中国龙-扬科
昨天
2
0
Linux系统设置全局的默认网络代理

更改全局配置文件/etc/profile all_proxy="all_proxy=socks://rahowviahva.ml:80/"ftp_proxy="ftp_proxy=http://rahowviahva.ml:80/"http_proxy="http_proxy=http://rahowviahva.ml:80/"......

临江仙卜算子
昨天
10
0
java框架学习日志-6(bean作用域和自动装配)

本章补充bean的作用域和自动装配 bean作用域 之前提到可以用scope来设置单例模式 <bean id="type" class="cn.dota2.tpye.Type" scope="singleton"></bean> 除此之外还有几种用法 singleton:......

白话
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部