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 相关文章推荐
TFDN图片播放器 不错自动播放
Oct 03 Javascript
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3
Mar 22 Javascript
js拦截alert对话框另类应用
Jan 16 Javascript
javascript最基本的函数汇总
Jun 25 Javascript
极力推荐10个短小实用的JavaScript代码段
Aug 03 Javascript
学习Node.js模块机制
Oct 17 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
Nov 16 Javascript
vue 监听屏幕高度的实例
Sep 05 Javascript
bootstrap table.js动态填充单元格数据的多种方法
Jul 18 Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
Aug 03 Javascript
JavaScript中layim之整合右键菜单的示例代码
Feb 06 Javascript
JS异步堆栈追踪之为什么await胜过Promise
Apr 28 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
PHP+iFrame实现页面无需刷新的异步文件上传
2014/09/16 PHP
php通过sort()函数给数组排序的方法
2015/03/18 PHP
ThinkPHP中数据操作案例分析
2015/09/27 PHP
javascript 一个自定义长度的文本自动换行的函数
2007/08/19 Javascript
jQuery验证Checkbox是否选中的代码 推荐
2011/09/04 Javascript
javascript:window.open弹出窗口的位置问题
2014/03/18 Javascript
JS+CSS实现DIV层的展开、收缩效果
2016/01/28 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
2016/10/11 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
2016/12/08 Javascript
学习使用jQuery表单验证插件和日历插件
2017/02/13 Javascript
Linux CentOS系统下安装node.js与express的方法
2017/04/01 Javascript
简单实现js进度条加载效果
2020/03/25 Javascript
基于AngularJs select绑定数字类型的问题
2018/10/08 Javascript
详解js 创建对象的几种方法
2019/03/08 Javascript
Jquery的autocomplete插件用法及参数讲解
2019/03/12 jQuery
八种Vue组件间通讯方式合集(推荐)
2020/08/18 Javascript
Vue实现boradcast和dispatch的示例
2020/11/13 Javascript
python常见的格式化输出小结
2016/12/15 Python
python保存数据到本地文件的方法
2018/06/23 Python
Python语言进阶知识点总结
2019/05/28 Python
PyQt5 控件字体样式等设置的实现
2020/05/13 Python
python如何输出反斜杠
2020/06/18 Python
HTML5 history新特性pushState、replaceState及两者的区别
2015/12/26 HTML / CSS
日本最大的旅游网站:Rakuten Travel(乐天旅游)
2018/08/02 全球购物
人事主管的岗位职责
2013/11/16 职场文书
网站设计师的岗位职责
2013/11/21 职场文书
迟到检讨书900字
2014/01/14 职场文书
仓库管理员岗位职责
2014/03/19 职场文书
白岩松演讲
2014/05/21 职场文书
学校安全工作汇报材料
2014/08/16 职场文书
关于成立领导小组的通知
2015/04/23 职场文书
运动会新闻报道稿
2015/07/22 职场文书
药品销售员2015年终工作总结
2015/10/22 职场文书
Go各时间字符串使用解析
2021/04/02 Golang
如何理解PHP核心特性命名空间
2021/05/28 PHP
Python天气语音播报小助手
2021/09/25 Python