Angular.js中处理页面闪烁的方法详解


Posted in Javascript onMarch 09, 2017

前言

大家在使用{{}}绑定数据的时候,页面加载会出现满屏尽是{{xxx}}的情况。数据还没响应,但页面已经渲染了。这是因为浏览器和angularjs渲染页面都需要消耗一定的时间,这个间隔可能很小,甚至让人感觉不到,这种情况一切正常,但这个时间也可能很长,这时候用户可能会看到满屏尽是{{xxxx}}。这种情况被叫做“Flash Of Unrendered Content (FOUC)(K)?and is always unwanted.”。

问题

为了图方便,我们很喜欢使用下面的做法

<div>
 {{name}}
 </div>

但这也为满屏尽是{{}}埋下了坑。当接口,网络响应速度够快的情况下,很难发现这个问题,但放在移动端4g或者网络环境更差的情况下,这个问题就会频发。

解决办法

1、ng-cloak

该指令是angularjs的内置的指令,它的作用是隐藏所有被它包含的元素。在浏览器加载和编译渲染完成后,angularjs会自动删除ngCloak元素属性,这样这个元素就会变为可见的。

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

2、ng-bind

该指令是angularjs内置的用于绑定页面数据的指令。可以使用该指令代替{{}}的方式绑定数据到页面上。使用ng-bind可以防止未被渲染的{{}}展示给用户。如下所示:

<div ng-bind="name"> 
 </div>

3、resolve

当使用routes路由的时候,resolve可以防止我们在route路由被完全加载之前获取我们需要加载的数据,当数据被加载成功之后,路由再改变而页面也会呈现给用户,数据没有加载成功route不会改变。

可以参考:https://3water.com/article/80523.htm

angular.module('myApp', ['ngRoute'])
.config(function($routeProvider) {
 $routeProvider
 .when('/account', {
 controller: 'AccountCtrl',
 templateUrl: 'views/account.html',
 resolve: {
 // We specify a promise to be resolved
 account: function($q) {
 var d = $q.defer();
 $timeout(function() {
 d.resolve({
 id: 1,
 name: 'Ari Lerner'
 })
 }, 1000);
 return d.promise;
 }
 }
 })
});

resolve 项需要一个key/value对象,key是resolve依赖的名称,value可以是一个字符串(as a service)或者一个返回依赖的方法。

resolve is very useful when the resolve value returns a promise that becomes resolved or rejected.

当路由加载的时候,resolve参数里的keys可以作为可注入的依赖:

ngular.module('myApp')
.controller('AccountCtrl', 
 function($scope, account) {
 $scope.account = account;
});

我们同样可以使用resolve key传递$http方法返回的结果,as $http returns promises from it's method calls:

angular.module('myApp', ['ngRoute'])
.config(function($routeProvider) {
 $routeProvider
 .when('/account', {
 controller: 'AccountCtrl',
 templateUrl: 'views/account.html',
 resolve: {
 account: function($http) {
 return $http.get('http://example.com/account.json')
 }
 }
 })

推荐定义一个独立的service的方式来使用resolve key,并且使用service来相应返回所需的数据(这种方式更容易测试)。要这样处理的话,我们需要创建一个service:

首先,看一下accountService,

angular.module('app')
.factory('accountService', function($http, $q) {
 return {
 getAccount: function() {
 var d = $q.defer();
 $http.get('/account')
 .then(function(response) {
 d.resolve(response.data)
 }, function err(reason) {
 d.reject(reason);
 });
 return d.promise;
 }
 }
})

定义好service之后我们就可以使用这个service来替换上面代码中直接调用$http的方式了:

ngular.module('myApp', ['ngRoute'])
.config(function($routeProvider) {
 $routeProvider
 .when('/account', {
 controller: 'AccountCtrl',
 templateUrl: 'views/account.html',
 resolve: {
 // We specify a promise to be resolved
 account: function(accountService) {
 return accountService.getAccount()
 }
 }
 })

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jQuery判断密码强度实现思路及代码
Apr 24 Javascript
jQuery中closest()函数用法实例
Jan 07 Javascript
使用jQuery监听DOM元素大小变化
Feb 24 Javascript
JS简单设置下拉选择框默认值的方法
Aug 20 Javascript
js发送短信倒计时的简单实现方法
Sep 08 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
Sep 12 Javascript
vue2.0在table中实现全选和反选的示例代码
Nov 04 Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
May 08 Javascript
关于JavaScript 数组你应该知道的事情(推荐)
Apr 10 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
Jun 19 Javascript
JavaScript实现原型封装轮播图
Dec 27 Javascript
原生js实现自定义难度的扫雷游戏
Jan 22 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
Mar 09 #Javascript
JS实现课堂随机点名和顺序点名
Mar 09 #Javascript
JavaScript实现两个select下拉框选项左移右移
Mar 09 #Javascript
js实现年月日表单三级联动
Apr 17 #Javascript
js实现3D图片展示效果
Mar 09 #Javascript
JavaScript实现左右下拉框动态增删示例
Mar 09 #Javascript
less简单入门(CSS 预处理语言)
Mar 08 #Javascript
You might like
世界上第一台立体声收音机
2021/03/01 无线电
PHP中strtr字符串替换用法详解
2014/11/26 PHP
Yii框架数据模型的验证规则rules()被执行的方法
2016/12/02 PHP
ThinkPHP5 验证器的具体使用
2018/05/31 PHP
使用laravel和ECharts实现折线图效果的例子
2019/10/09 PHP
Javascript new关键字的玄机 以及其它
2010/08/25 Javascript
jQuery实现根据类型自动显示和隐藏表单
2015/03/18 Javascript
常见的javascript跨域通信方法
2015/12/31 Javascript
JS iFrame加载慢怎么解决
2016/05/13 Javascript
最丑的时钟效果!js canvas时钟制作方法
2016/08/15 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
2016/11/06 Javascript
使用JavaScript为一张图片设置备选路径的方法
2017/01/04 Javascript
jQuery EasyUI Draggable拖动组件
2017/03/01 Javascript
jquery图片放大镜效果
2017/06/23 jQuery
js匿名函数使用&amp;传参(实例)
2017/09/08 Javascript
JS和JQuery实现雪花飘落效果
2017/11/30 jQuery
Vue cli+mui 区域滚动的实例代码
2018/01/25 Javascript
vue2.0+koa2+mongodb实现注册登录
2018/04/10 Javascript
python抓取京东商城手机列表url实例代码
2013/12/18 Python
python解析xml模块封装代码
2014/02/07 Python
Python 递归函数详解及实例
2016/12/27 Python
Python基于matplotlib绘制栈式直方图的方法示例
2017/08/09 Python
浅谈python中频繁的print到底能浪费多长时间
2020/02/21 Python
Django ForeignKey与数据库的FOREIGN KEY约束详解
2020/05/20 Python
pycharm实现猜数游戏
2020/12/07 Python
英国复古和经典球衣网站:Vintage Football Shirts
2018/10/05 全球购物
阿里巴巴美国:Alibaba美国
2019/11/24 全球购物
2014新课程改革心得体会
2014/03/10 职场文书
经典商业广告词
2014/03/13 职场文书
单位在职证明书
2014/09/11 职场文书
认错检讨书
2014/10/02 职场文书
2015年计算机教学工作总结
2015/07/22 职场文书
解决Django transaction进行事务管理踩过的坑
2021/04/24 Python
Spring Data JPA使用JPQL与原生SQL进行查询的操作
2021/06/15 Java/Android
css 边框添加四个角的实现代码
2021/10/16 HTML / CSS
Python使用pandas导入csv文件内容的示例代码
2022/12/24 Python