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 相关文章推荐
Javascript 八进制转义字符(8进制)
Apr 08 Javascript
利用毫秒减值计算时长的js代码
Sep 22 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
Nov 25 Javascript
解析js如何获取css样式
Dec 11 Javascript
微信小程序中做用户登录与登录态维护的实现详解
May 17 Javascript
使用Vue写一个datepicker的示例
Jan 27 Javascript
微信小程序实现弹出菜单
Jul 19 Javascript
微信小程序传值以及获取值方法的详解
Apr 29 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
May 14 Javascript
细说Vue组件的服务器端渲染的过程
May 30 Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
Jun 04 Javascript
JavaScript前端开发时数值运算的小技巧
Jul 28 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
对盗链说再见...
2006/10/09 PHP
php 中文和编码判断代码
2010/05/16 PHP
PHP 透明水印生成代码
2012/08/27 PHP
基于PHP读取csv文件内容的详解
2013/06/18 PHP
浅析PHP 按位与或 (^ 、&amp;)
2013/06/21 PHP
单点登录 Ucenter示例分析
2013/10/29 PHP
Yii结合CKEditor实现图片上传功能
2014/06/13 PHP
PHP多维数组转一维数组的简单实现方法
2015/12/23 PHP
PHP面向对象编程之深入理解方法重载与方法覆盖(多态)
2015/12/24 PHP
删除PHP数组中头部、尾部、任意元素的实现代码
2017/04/10 PHP
解决PHP Opcache 缓存刷新、代码重载出现无法更新代码的问题
2020/08/24 PHP
数据结构之利用PHP实现二分搜索树
2020/10/25 PHP
js实现简单的购物车有图有代码
2014/05/26 Javascript
用JS实现图片轮播效果代码(一)
2016/06/26 Javascript
javascript实现动态显示颜色块的报表效果
2017/04/10 Javascript
vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
2017/04/22 Javascript
seajs模块压缩问题与解决方法实例分析
2017/10/10 Javascript
ES6 javascript中Class类继承用法实例详解
2017/10/30 Javascript
js设置随机切换背景图片的简单实例
2017/11/12 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
2018/01/18 Javascript
Node.js中的child_process模块详解
2018/06/08 Javascript
[01:04:30]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
使用Python &amp; Flask 实现RESTful Web API的实例
2017/09/19 Python
TensorFlow Session会话控制&amp;Variable变量详解
2018/07/30 Python
浅谈Python线程的同步互斥与死锁
2020/03/22 Python
Jupyter 无法下载文件夹如何实现曲线救国
2020/04/22 Python
html5中监听canvas内部元素点击事件的三种方法
2019/04/28 HTML / CSS
马来西亚与新加坡长途巴士售票网站:BusOnlineTicket.com
2018/11/05 全球购物
阿迪达斯中国官网:Adidas中国
2020/12/14 全球购物
制衣厂各岗位职责
2013/12/02 职场文书
教师见习期自我鉴定
2014/04/28 职场文书
学校运动会报道稿
2014/09/23 职场文书
法人身份证明书
2014/10/08 职场文书
学校机关党总支领导班子整改工作方案
2014/10/26 职场文书
五好文明家庭事迹材料
2014/12/20 职场文书
小学生组织委员竞选稿
2015/11/21 职场文书