码迷,mamicode.com
首页 > Web开发 > 详细

AngularJS页面加载闪烁解决方案

时间:2015-05-07 12:45:49      阅读:147      评论:0      收藏:0      [点我收藏+]

标签:

    AngularJS这个大杀器使得实现SPA(Single Page App)变得异常的简单,其双向绑定让页面内容的重新渲染无需编写大量JS代码,无需构造DOM字符串丑陋的,作为需要快速迭代,提高用户体现的下一代互联网应用,AngularJS可以说已经成为必选技术之一。

    然而,AngularJS同样存在Javascript的一个通病,其标签占位符需要在DOM加载完和javascript加载完后才会触发绑定和渲染工作,这导致在页面加载时会出现闪烁(先显示标签,再被渲染掉),尤其在网速不理想的情况下,严重影响用户体验。

    AngularJS提供了两种方案来解决这个问题:
1、使用ng-bind或ng-bing-template属性而不是{{field}}占位符,由于DOM属性不可视,初始化时显示默认空白。
2、使用ng-cloak属性或设置ng-cloak样式。其原理是AngularJS在初始化时在head里增加了一个ng-cloak的样式,该样式设置DOM的display:none,即默认不显示。

    然而这两个方案都不理想ng-bind或ng-bing-template无法实现复杂的内容表示,而现代浏览器仍然可能在ng-cloak样式被插入head之前显示页面了。

   最终方案:样式表中增加一个ng-cloak,内容同AngularJS动态创建的一致,在head中静态加载

AngularJS页面加载闪烁解决方案

标签:

原文地址:http://my.oschina.net/u/699015/blog/411678

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!