我们知道在应用的页面或者组件需要加载数据时，浏览器和angular渲染页面都需要消耗一定的时间。这里的间隔可能很小，甚至让人感觉不到区别；但也可能很长，这样会导致让我们的用户看到了没有被渲染过的页面。

这种情况被叫做Flash Of Unrendered Content (FOUC)（K）？and is always unwanted.以下几种方法可以解决这个问题：

1、ng-cloak

ng-cloak指令是angular的内置指令，它的作用是隐藏所有被它包含的元素：

<div ng-cloak><h1>Hello {{ name }}</h1>
</div>

在浏览器加载和编译渲染完成之后，angular会自动删除ngCloak元素属性，这样这个元素就会变成可见的。

在IE7里面使用ng-cloak的安全方式是给元素多加一个ng-cloak class

<div ng-cloak class="ng-cloak"><h1>Hello {{ name }}</h1>
</div>

2、ng-bind

ng-bind是angular里面另一个内置的用于操作绑定页面数据的指令。我们可以使用ng-bind代替{{ }}的形式绑定元素到页面上；

使用ng-bind替代{{ }}可以防止未被渲染的{{ }}就展示给用户了，使用ng-bind渲染的空元素替代{{ }}会显得友好很多。

上面的例子可以重写成下面那样，这样就可以防止页面出现{{ }}了

<div><h1>Hello <span ng-bind="name"></span></h1>
</div>

Angular在页面加载很慢的时候,会出现双花括号的问题相关推荐

angular单个页面加载多个ng-app
一般angular单个页面只能加载一个ng-app,一个页面会自动加载第一个ng-app,其它ng-app不会被加载.如果想加载多个ng-app就需要使用angular.bootstrap去加载后面的 ...
动态页面加载速度太慢
今天遇到一个问题,使用nodejs写的一个项目,通过请求后台数据库,来对页面进行动态渲染. 在html页面使用模板引擎渲染过后,刷新页面导致页面加载很长时间,后来了解到是因为网络原因,当时网络状态不好 ...
页面加载速度-合并资源文件
前言一直觉得自己的博客站点页面加载很慢, 就想着去优化一下. 呐, 下图是一次文章页面的加载, 需要2.5s. 其中 js 文件就有18个. 众所周知, 浏览器对资源文件的并行下载数量是有限制的(不 ...
一个页面上有大量的图片，加载很慢，你有哪些方法优化这些图片的加载？
一个页面上有大量的图片,加载很慢,你有哪些方法优化这些图片的加载? 1.使用 Sprites 图片技术它将一个页面涉及到的所有零星图片都包含到一张大图中去,然后利用 CSS 技术展现出来.这样一来, ...
一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。
一个页面上有大量的图片(大型电商网站),加载很慢,你有哪些方法优化这些图片的加载,给用户更好的体验. 图片懒加载,滚动到相应位置才加载图片. 图片预加载,如果为幻灯片.相册等,将当前展示图片的前一张和 ...
在一个html加载多个echarts,Echarts一个页面加载多个图表及图表自适应
Echarts一个页面加载多个图表及图表自适应模块化加载 //入口 require.config({ paths: { echarts: 'http://echarts.baidu.com/buil ...
angular 首屏加载优化_[转]Angular4首页加载慢优化之路
Angular是一个比较完善的前端MVC框架,包含了模板,数据双向绑定,路由,服务,过滤器,依赖注入等等所有的功能.在Web开发前后端流行的今天,我们在某个项目中也尝试使用该框架. 很快按照官网上的例 ...
关于请求被挂起页面加载缓慢问题的追查
本文前戏较多,务实的同学可以直接跳到结论. 由「钢的琴」网友脑洞大开延伸出了吉的他二的胡琵的琶,以及后来许嵩的「苏格拉没有底」,是否可以再拓展一下,得到哥本不爱吃哈根,哈根爱达斯等剧情乱入的关系. 上 ...
HTML页面加载和解析流程详细介绍
浏览器加载和渲染html的顺序.如何加快HTML页面加载速度.HTML页面加载和解析流程等等,在本文将为大家详细介绍下,感兴趣的朋友不要错过浏览器加载和渲染html的顺序 1. IE下载的顺序是从上 ...

Angular在页面加载很慢的时候,会出现双花括号的问题

1、ng-cloak

2、ng-bind

Angular在页面加载很慢的时候,会出现双花括号的问题相关推荐

最新文章

热门文章