AngularJS页面加载闪烁解决方案

2019独角兽企业重金招聘Python工程师标准>>>

    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中静态加载

转载于:https://my.oschina.net/u/699015/blog/411678