AngularJS页面加载闪烁解决方案

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

时间： 2024-10-30 05:25:12

AngularJS页面加载闪烁解决方案的相关文章

Angular页面加载闪现解决方案 ng-cloak

在做Angular项目时,经常会遇见在浏览器上闪烁表达式({{ express }} ),及模块(div)的闪烁,会闪现/闪烁隐藏的数据,之前用过vue.js,可以通过v-clock解决,同理Angular也可以通过ng-cloak来实现防止闪烁的方案. <div id="template1" ng-cloak>河马家</div> <div id="template2" ng-cloak> {{hema}}</div>

在Fragment中嵌套使用viewpagerindicator切换Fragment返回后出现空白页与FragmentPagerAdapter页面预加载的解决方案

1. 在Fragment中嵌套使用viewpagerindicator切换Fragment返回后出现空白页 先上代码: 1 mAdapter = new OrderAdapter(getChildFragmentManager()); 2 ViewPager pager = (ViewPager) v.findViewById(R.id.pager); 3 pager.setAdapter(mAdapter); 4 5 TabPageIndicator indicator = (TabPageI

黄聪：AngularJS 动态加载控制器实例-ocLoazLazy

一.AngularJS动态加载控制器和视图实例 路由配置关键代码: [javascript] view plain copy print? //二级页面 $stateProvider.state('main', { url: '/:name', /**如果需要动态加载数据和控制器***/ views: { "": { templateUrl: function ($stateParams) { console.info($stateParams); return '/template/

asp.net使用httphandler打包多CSS或JS文件以加快页面加载速度

介绍 使用许多小得JS.CSS文件代替一个庞大的JS或CSS文件来让代码获得更好的可维 护性,这是一个很好的实践.但这样做反过来却损失了网站的性能.虽然你应该将你的Javascript代码写在小文件中并且将大的CSS文件分割到小文件 中,当一个浏览器请求那些JS以及CSS文件,它却将为每一个文件产生一个请求.每一个HTTP请求将导致从你的浏览器到服务器上的一次"往返",从响应 服务器到客户端浏览器之间的等待时间称之为"延时".因此,如果你有四个JS文件以及三个CSS

页面加载完毕执行多个JS函数

通常我们需要在打开页面时加载脚本,这些脚本必须在页面加载完毕后才可以执行,因为这时候DOM才完整,可以利用window.onload确保这一点,如:window.onload=firstFunction;这脚本的意思是在页面完毕后执行firstFunction函数,但当有很多个函数需要在页面加载时执行呢?可能有人说可以这样:window.onload=firstFunction;window.onload=secondFunction; 但这样的话只会执行secondFunction函数. Si

JS 页面加载触发事件 document.ready和onload的区别

JS 页面加载触发事件 document.ready和onload的区别 document.ready和onload的区别——JavaScript文档加载完成事件 页面加载完成有两种事件: 一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件): 二是onload,指示页面包含图片等文件在内的所有元素都加载完成. 1.Dom Ready 用jQ的人很多人都是这么开始写脚本的: $(function(){       // do something }); 例如: $(functi

html5体验优化页面加载的14条建议

html5体验优化页面加载的14条建议 1. fake 页 - 首屏加速目标:首屏 3s 以内因为 71% 的用户期望移动页面跟 pc 页面一样快 (3s) ,74% 的用户能容忍的响应时间为 5 秒,所以我们必须保证移动端页面有足够的速度. 方案:- 避免页面长时间白页,页面渲染只需要完整的HTML 以及 CSS- 加载结束后页面第一屏便渲染结束,然后再异步加载js- 静态资源不使用 cookie- 优化加载顺序 css头.js尾 2. 降低请求「数」- 将可合并的 CSS.JS 文件合并-

41 关于请求被挂起页面加载缓慢问题的追查

缘起 有用户反馈内部MIS系统慢,页面加载耗时长.前端同学们开组会提及此事,如何解决慢的问题. 最致命的是:偶发!你不能准确知道它抽风的时间点,无法在想要追查问题的时候必现它.这只是一方面,另外,慢的可能实在太多了,那么问题来了,是前端导致的还是后端的问题? 对慢的定义也有待商榷,多久算慢?如果这个页面加载大量数据耗时增加那我认为这是正常的.但这个时限超过了一个合理的自然值,就变得不那么正常了,比如四五十秒,一分多钟. 最奇葩的是,如此久的耗时居然不会报超时错误,而是拿到正确返回后将页面呈现了出

页面加载优化的14条原则

1. 尽可能的减少 HTTP 的请求数 [content] 2. 使用 CDN(Content Delivery Network) [server] 3. 添加 Expires 头(或者 Cache-control ) [server] 4. Gzip 组件 [server] 5. 将 CSS 样式放在页面的上方 [css] 6. 将脚本移动到底部(包括内联的) [javascript] 7. 避免使用 CSS 中的 Expressions [css] 8. 将 JavaScript 和 CSS