文档章节

Angular 初始化闪烁之解决方案

梅气灶
 梅气灶
发布于 2015/12/07 17:22
字数 802
阅读 75
收藏 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学习笔记--bootstrap

一、总括 本文用于解释Angular初始化的过程,以及如何在你有需要的时候对Angular进行手工初始化。 二、Angular <script> 标签 本例用于展示如何通过推荐的路径整合Angular,实现自动初始化。...

武文海
2015/02/05
0
0
使用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
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

没有更多内容

加载失败,请刷新页面

加载更多

下一页

获取多个集合列表的笛卡尔积

获取多个集合笛卡尔积 电商中典型业务场景:商品搜索 单属性属性值之间为并查询 不同属性的属性值之间查询为与查询 import java.util.ArrayList;import java.util.List;/** * Created w...

键走偏锋
19分钟前
0
0
echarts 迁移地图 控制鼠标缩放大小比例

在网上找了好久没有找到解决方式,还是重新看了一下文档,终于找到的解决方案, zoom:1, //默认显示级别 scaleLimit:{min:1,max:3}, // 缩放级别 echarts 文档-配置项链接 http://echarts.b...

心驰
22分钟前
0
0
Boot2Docker ISO is out-of-date,

Boot2Docker ISO is out-of-date, downloading the latest release. 使用docker-machine时无法更新Boot2Docker ISO导致创建vm machine失败 解决方法:关闭网络,创建好之后再开启...

writeademo
30分钟前
0
0
在 Tomcat 中设置 Tapestry 框架的 html 热加载

如果开发中使用到了 Tapestry 这个框架,如果事先没有设置过的话,开发的时候 html 是不会热加载的,也就是说修改了 html 文件,不能刷新浏览器后立马看到修改完的效果,必须先重新启动应用服...

LeoXu
52分钟前
0
0
【微服务】开启巨石应用到微服务的探索

背景 在过去的一年时间里,我一直在从事一件事情,将现有的单体应用(巨石应用)向微服务改造。 接下来,将持续整理一些在微服务路上的学习与成长。 为什么要做微服务 单体应用,开发、部署简...

艳沐石
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部