angularjs页面加载时闪屏问题
2017-10-31 10:22
465 查看
由于有时候网速或者其他的原因导致数据刷新很慢,如果使用{{ }}绑定,就会显示出变量原型及{{}},
首先想到的解决办法是:首页用ng-bind绑定数据,其他的可以用{{ }}绑定。
使得之前的
<div>你的编号是{{index + 1}}</div>
华丽丽的转化为
<div>你的编号是<span ng-bind="index+1"></span></div>
,也不知道你看着感觉如何,反正我是看着有点揪心,我好端端的只需要一个元素就能搞定的问题,现在需要两个元素,如果遇到更复杂的问题那就真的头大了,于是我又找到了另一种解决办法:
通过ng-cloak指令来解决,直接为元素添加此属性,angularjs会将首先将带有ng-cloak的元素设置为display=none,等到angularjs解析到带有ng-cloak的标签时,再去掉display=none样式以及ng-cloak属性。
此时又会发现还有一个问题,当同一个页面有很多ng-cloak时,加载完第一个带有ng-cloak的元素,其他的带有ng-cloak元素的display:none也一起消失了,此时之前的问题又发生了,为了解决这个问题,我们不妨这样写:
<div
ng-cloak class=‘ng-cloak’>{{index + 1}}</div>
这样就完美的解决了上述问题。
首先想到的解决办法是:首页用ng-bind绑定数据,其他的可以用{{ }}绑定。
使得之前的
<div>你的编号是{{index + 1}}</div>
华丽丽的转化为
<div>你的编号是<span ng-bind="index+1"></span></div>
,也不知道你看着感觉如何,反正我是看着有点揪心,我好端端的只需要一个元素就能搞定的问题,现在需要两个元素,如果遇到更复杂的问题那就真的头大了,于是我又找到了另一种解决办法:
通过ng-cloak指令来解决,直接为元素添加此属性,angularjs会将首先将带有ng-cloak的元素设置为display=none,等到angularjs解析到带有ng-cloak的标签时,再去掉display=none样式以及ng-cloak属性。
此时又会发现还有一个问题,当同一个页面有很多ng-cloak时,加载完第一个带有ng-cloak的元素,其他的带有ng-cloak元素的display:none也一起消失了,此时之前的问题又发生了,为了解决这个问题,我们不妨这样写:
<div
ng-cloak class=‘ng-cloak’>{{index + 1}}</div>
这样就完美的解决了上述问题。
相关文章推荐
- ng-bind及ng-cloak解决AngularJs页面加载闪屏问题
- 【EasyUI】——页面加载闪屏问题
- angularjs应用刷新页面,导致toaster加载时失效的问题
- JQuery 解决用load加载页面到div时,不执行页面js的问题
- 解决wordpress页面加载慢的问题
- 解决jqgrid多字段查询页面加载结束就弹出查询窗口的问题
- WebView 加载页面空白及加载不全问题
- samsung 手机webview 加载https 页面不显示问题
- [转载] window.onload 关于页面加载完毕的问题
- html页面在iOS和Android的webview中不能正确加载的问题
- 通过jquery load在list页面多次加载详情页,导致的多form校验以及提交问题
- 基于AngularJS实现页面滚动到底自动加载数据的功能
- NavBar加载页面时页面不能操作的问题
- 日志:jsp页面加载COM控件一些小问题
- 解决: Firefox一些页面绝大部门显示正常,但却永远加载不完的问题,页面一直在加载中
- 普元 EOS Platform 7.6 sso集成业务应用实现单点登录,但登录跳转到成功页面时,经常出现闪屏问题,每秒10次以上
- jquery easyui window href加载页面,子页面JS失效问题
- 关于selenium的智能等待页面加载的问题
- AngularJS - 利用ui-route及provider实现页面数据预加载的关键
- 关于c#页面加载时确定和取消问题