文档章节

Angular 初始化闪烁之解决方案

梅气灶
 梅气灶
发布于 2015/12/07 17:22
字数 802
阅读 76
收藏 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中的$http.post与jQuery.post的区别

很多时候我们需要用ajax提交post数据,angularjs与jq类似,也有封装好的post。 但是jQuery的post明显比angularjs的要简单一些,人性化一些。 AngularJS: $http.post('do-submit.php',myDat...

tommyfok
2014/07/06
0
7
Angular.js 相关记录

AngularJS作用域文档:http://docs.angularjs.org/api/ng.$rootScope.Scope ng-view 指令的角色是为当前路由把对应的视图模板载入到布局模板中。 AngularJS内置过滤器:http://code.angular...

彭博
2014/04/25
0
2
使用Yeoman快速构建基于angular的web应用

前言 最近在学习使用安哥拉(angular.js)编写web应用,看了一些网友实践了解到yeoman,这个工具实在太好用了,必须在这里介绍一下。 angular 首先简单介绍一下angular,它是由google开源的一套...

snakelxc
2013/08/25
0
0
使用Yeoman快速构建基于angular的web应用

前言 最近在学习使用安哥拉(angular.js)编写web应用,看了一些网友实践了解到yeoman,这个工具实在太好用了,必须在这里介绍一下。 angular 首先简单介绍一下angular,它是由google开源的一套...

kisops
2013/08/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Ubuntu18.04 安装最新版WPS

1.手动卸载libreoffice:sudo apt-get remove --purge libreoffice* 2.官网下载WPS和字体: WPS:http://wps-community.org/download.html 字体:http://wps-community.org/download.html?vl......

AI_SKI
41分钟前
3
0
数据结构(算法)-图(深度优先搜索 DFS)

#include <iostream>using namespace std;#define MaxVex 30typedef char VertexType;typedef struct vexNode adjList[MaxVex];struct edgeNode{int adjvex;//邻接点......

ashuo
46分钟前
0
0
1024 搞事倒计时!距程序员节还有 2 天!

详情请关注微信公众号:七牛云

七牛云
47分钟前
0
0
Java泛型方法

1. 定义泛型方法 (1) 如果你定义了一个泛型(类、接口),那么Java规定,你不能在所有的静态方法、静态初块等所有静态内容中使用泛型的类型参数。例如: public class A<T> { public st...

两广总督bogang
47分钟前
2
0
如何解决JavaScript中0.1+0.2不等于0.3

console.log(0.1+0.2===0.3)// true or false??   在正常的数学逻辑思维中,0.1+0.2=0.3这个逻辑是正确的,但是在JavaScript中0.1+0.2!==0.3,这是为什么呢?这个问题也会偶尔被用来当...

peakedness丶
48分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部