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的实现原理的模拟代码 -1 核心部分
Aug 01 Javascript
自己做的模拟模态对话框实现代码
May 23 Javascript
js 自动播放的实例代码
Nov 19 Javascript
jQuery实现图片渐入渐出切换展示效果
Aug 15 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
Mar 30 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
Aug 08 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
Feb 17 Javascript
ExtJs整合Echarts的示例代码
Feb 27 Javascript
ES6 对象的新功能与解构赋值介绍
Feb 05 Javascript
react 原生实现头像滚动播放的示例
Apr 21 Javascript
vue总线机制(bus)知识点详解
May 10 Javascript
JS图片懒加载技术实现过程解析
Jul 27 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
php知道与问问的采集插件代码
2010/10/12 PHP
PHP实现定时执行任务的方法
2014/10/05 PHP
PHP使用数组实现矩阵数学运算的方法示例
2017/05/29 PHP
PHP实现的只保留字符串首尾字符功能示例【隐藏部分字符串】
2019/03/11 PHP
PHP多进程简单实例小结
2019/11/09 PHP
JavaScript中this关键字使用方法详解
2007/03/08 Javascript
JS延迟加载(setTimeout) JS最后加载
2010/07/15 Javascript
jquery 学习之二 属性(html()与html(val))
2010/11/25 Javascript
JavaScript表达式:URL 协议介绍
2013/03/10 Javascript
ExtJs动态生成treepanel的Json格式
2015/07/19 Javascript
jQuery实现放大镜效果实例代码
2016/03/17 Javascript
javascript中利用柯里化函数实现bind方法
2016/04/29 Javascript
总结在前端排序中遇到的问题
2016/07/19 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
2017/03/30 jQuery
AngularJS实现图片上传和预览功能的方法分析
2017/11/08 Javascript
Angular实现的敏感文字自动过滤与提示功能示例
2017/12/29 Javascript
vue修改对象的属性值后页面不重新渲染的实例
2018/08/09 Javascript
vue移动端屏幕适配详解
2019/04/30 Javascript
vue 中几种传值方法(3种)
2019/11/12 Javascript
Vue基于iview table展示图片实现点击放大
2020/08/05 Javascript
Vue两种组件类型:递归组件和动态组件的用法
2020/08/06 Javascript
[05:02][DOTA2]DOTA进化论 第一期
2013/09/27 DOTA
[39:21]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.24
2019/09/10 DOTA
Python 对象中的数据类型
2017/05/13 Python
python读取文本中的坐标方法
2018/10/14 Python
python:接口间数据传递与调用方法
2018/12/17 Python
python实现接口并发测试脚本
2019/06/25 Python
使用django和vue进行数据交互的方法步骤
2019/11/11 Python
pytorch进行上采样的种类实例
2020/02/18 Python
美国南加州的原创极限运动潮牌:Vans(范斯)
2016/08/05 全球购物
俄罗斯香水和化妆品在线商店:Aroma-butik
2020/02/28 全球购物
牵手50新加坡:专为黄金岁月的单身人士而设的交友网站
2020/08/16 全球购物
自动化专业本科毕业生求职信
2013/10/20 职场文书
关于祖国的演讲稿
2014/05/04 职场文书
辅导员学期工作总结
2015/08/14 职场文书
详解Python牛顿插值法
2021/05/11 Python