文档章节

Angular 初始化闪烁之解决方案

梅气灶
 梅气灶
发布于 2015/12/07 17:22
字数 802
阅读 283
收藏 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
杭州
前端工程师
私信 提问
加载中

评论(0)

AngularJS页面加载闪烁解决方案

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

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

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

开元中国2015
2018/11/09
281
0
vue 解析时表达式闪烁的问题

现象:   在使用 vuejs、angularjs 开发时,经常会遇见浏览器页面闪现表达式 ({{ express }} ), 或者是模块(div)的闪烁。 原因:   由于 JavaScript 去操作DOM,都会等待 DOM 加载完成(...

osc_y45xtjhw
2019/06/06
4
0
【HTTP】http请求url参数包含+号,被解析为空格

项目技术:Angular 6 问题现象:接口传参的时候,使用 httpClient.post 方法提交数据,字段中包含+号被解析成空格,提交数据错误 解决过程: 1、http请求中包含+号,会被自动解析成空格,必须...

osc_tehy8vur
2019/08/07
3
0
15个学习 AngularJS 最好的网站

AngularJS 是一款优秀的前端JS开发框架,在你开发应用的时候可以帮你快速提示自己的能力并简化代码。掌握 AngularJS 可以帮你提示你的应用的可用性、实现其他一些在科技界认为不可能的功能。...

Specs
2019/09/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

daily work report on May 25,2020

React-Native工程师 岗位要求 1、三年以上基于React-Native技术完成电商平台app混合开发实际工作经验,熟悉电商平台相关业务。 2、能熟练掌握React-Native,并能基于该技术独立完成相关工作,...

qwfys
8分钟前
18
0
HTTP/3 未来可期?

点击上方“朱小厮的博客”,选择“设为星标” 后台回复"加群",加入新技术 2015 年 HTTP/2 标准发表后,大多数主流浏览器也于当年年底支持该标准。此后,凭借着多路复用、头部压缩、服务器推...

osc_3b0dcpcm
10分钟前
5
0
【原创】JVM系列01 | 开篇

  20大进阶架构专题每日送达   1. Java 虚拟机是什么? 1.1 虚拟机   虚拟机:虚拟的计算机,一个用来执行虚拟计算机指令的软件。   虚拟机分为系统虚拟机和程序虚拟机。   系统虚...

osc_0k23td2u
11分钟前
4
0
Flink 1.10 细粒度资源管理解析

相信不少读者在开发 Flink 应用时或多或少会遇到在内存调优方面的问题,比如在我们生产环境中遇到最多的 TaskManager 在容器化环境下占用超出容器限制的内存而被 YARN/Mesos kill 掉[1],再比...

osc_n0c6719w
12分钟前
8
0
IDEA使用技巧-->查看继承关系

在开发中项目庞大的时候你会不知道当前类在项目中的使用情况,在哪被继承?在哪被实现?和谁有关联? 快捷键 eclipse中是: ctrl+tidea中是: ctrl+H点击当前类, 然后ctrl+H...

宇宝
13分钟前
21
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部