Angularjs处理页面闪烁的解决方法


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不会改变。

可以参考

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 String 的扩展方法集合
Jun 01 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
Apr 18 Javascript
JavaScript中的apply和call函数详解
Jul 20 Javascript
JS实现当前页居中分页效果的方法
Jun 18 Javascript
Javascript基础知识盲点总结之函数
May 15 Javascript
详解jQuery的Cookie插件
Nov 23 Javascript
jQuery滑动到底部加载下一页数据的实例代码
May 22 jQuery
vue中用H5实现文件上传的方法实例代码
May 27 Javascript
vue.js input框之间赋值方法
Aug 24 Javascript
vue基础之事件v-onclick=&quot;函数&quot;用法示例
Mar 11 Javascript
解决layui动态添加的元素click等事件触发不了的问题
Sep 20 Javascript
微信小程序使用蓝牙小插件
Sep 23 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
Mar 09 #Javascript
jQuery实现字符串全部替换的方法【推荐】
Mar 09 #Javascript
js获取json中key所对应的value值的简单方法
Jun 17 #Javascript
ng2学习笔记之bootstrap中的component使用教程
Mar 09 #Javascript
Angular.js中处理页面闪烁的方法详解
Mar 09 #Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
Mar 09 #Javascript
JS实现课堂随机点名和顺序点名
Mar 09 #Javascript
You might like
openflashchart 2.0 简单案例php版
2012/05/21 PHP
php数组键名技巧小结
2015/02/17 PHP
PHP实现的数据对象映射模式详解
2019/03/20 PHP
Apply an AutoFormat to an Excel Spreadsheet
2007/06/12 Javascript
jquery调用wcf并展示出数据的方法
2011/07/07 Javascript
jquery attr 设定src中含有&amp;(宏)符号问题的解决方法
2011/07/26 Javascript
jquery ready函数、css函数及text()使用示例
2013/09/27 Javascript
表格奇偶行设置不同颜色的核心JS代码
2013/12/24 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
2014/06/27 Javascript
jquery阻止后续事件只执行第一个事件
2014/07/24 Javascript
在JS数组特定索引处指定位置插入元素的技巧
2014/08/24 Javascript
jQuery的css()方法用法实例
2014/12/24 Javascript
angularjs 处理多个异步请求方法汇总
2015/01/06 Javascript
js获取本机操作系统类型的两种方法
2015/12/19 Javascript
jQuery新窗口打开外链接
2016/07/21 Javascript
详谈js中window.location.search的用法和作用
2017/02/13 Javascript
nodejs模块nodemailer基本使用-邮件发送示例(支持附件)
2017/03/28 NodeJs
详解Windows下安装Nodejs步骤
2017/05/18 NodeJs
vue判断input输入内容全是空格的方法
2018/03/02 Javascript
vue脚手架搭建过程图解
2018/06/06 Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
2018/12/03 Javascript
puppeteer库入门初探
2019/01/09 Javascript
nodejs微信开发之授权登录+获取用户信息
2019/03/17 NodeJs
JS异步宏队列与微队列原理区别详解
2020/07/02 Javascript
[22:59]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python实现基本数据结构中队列的操作方法示例
2017/12/04 Python
Python Image模块基本图像处理操作小结
2019/04/13 Python
python基于socket函数实现端口扫描
2020/05/28 Python
python导入库的具体方法
2020/06/18 Python
详解Python yaml模块
2020/09/23 Python
Servlet的实例是在生命周期什么时候创建的?配置servlet最重要的是什么?
2012/05/30 面试题
妇产科护士自我鉴定
2013/10/15 职场文书
机械专业毕业生自荐信
2013/11/02 职场文书
学生打架检讨书
2014/02/14 职场文书
Python并发编程实例教程之线程的玩法
2021/06/20 Python
浅析Redis Sentinel 与 Redis Cluster
2021/06/24 Redis