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权威指南 学习笔记之javascript数据类型
Sep 24 Javascript
深入理解JQuery keyUp和keyDown的区别
Dec 12 Javascript
JQuery中$.ajax()方法参数详解及应用
Dec 12 Javascript
用Jquery实现滚动新闻
Feb 12 Javascript
js图片处理示例代码
May 12 Javascript
利用JavaScript脚本实现滚屏效果的方法
Jul 07 Javascript
基于jQuery实现选项卡效果
Jan 04 Javascript
Vue过滤器的用法和自定义过滤器使用
Feb 08 Javascript
Angular2开发——组件规划篇
Mar 28 Javascript
angular2组件中定时刷新并清除定时器的实例讲解
Aug 31 Javascript
微信小程序实现元素渐入渐出动画效果封装方法
May 18 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
Jun 19 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
javascript,php获取函数参数对象的代码
2011/02/03 PHP
php json_encode奇怪问题说明
2011/09/27 PHP
PHP中使用socket方式GET、POST数据实例
2015/04/02 PHP
php中上传文件的的解决方案
2018/09/25 PHP
脚本安需导入(装载)的三种模式的对比
2007/06/24 Javascript
jquery学习笔记 用jquery实现无刷新登录
2011/08/08 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
2013/11/18 Javascript
js实现点击文本框显示日期选择器特效代码分享
2020/05/21 Javascript
js实现的奥运倒计时时钟效果代码
2015/12/09 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
2016/06/13 Javascript
vue.js入门教程之绑定class和style样式
2016/09/02 Javascript
利用JS实现简单的日期选择插件
2017/01/23 Javascript
vue生成token并保存到本地存储中
2018/07/17 Javascript
vue2.0 路由模式mode=&quot;history&quot;的作用
2018/10/18 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
2019/01/23 Javascript
JavaScript中callee和caller的区别与用法实例分析
2019/06/28 Javascript
js中apply和call的理解与使用方法
2019/11/27 Javascript
es6函数之尾调用优化实例分析
2020/04/25 Javascript
[54:08]LGD女子刀塔学院 DOTA2炼金术士教学
2014/01/09 DOTA
Python中MYSQLdb出现乱码的解决方法
2014/10/11 Python
Python面向对象之类的封装操作示例
2019/06/08 Python
Python简易版停车管理系统
2019/08/12 Python
Python with关键字,上下文管理器,@contextmanager文件操作示例
2019/10/17 Python
TensorFlow实现指数衰减学习率的方法
2020/02/05 Python
基于TensorBoard中graph模块图结构分析
2020/02/15 Python
jupyter notebook oepncv 显示一张图像的实现
2020/04/24 Python
Python绘制K线图之可视化神器pyecharts的使用
2021/03/02 Python
canvas实现俄罗斯方块的方法示例
2018/12/13 HTML / CSS
ECCO俄罗斯官网:北欧丹麦鞋履及皮具品牌
2020/06/26 全球购物
WebSphere面试题:在WebSphere里面如何部署一个应用
2015/08/02 面试题
前台领班岗位职责
2013/12/04 职场文书
政协会议宣传标语
2014/10/09 职场文书
民主评议党员个人自我评价
2015/03/03 职场文书
2015年社区卫生工作总结
2015/04/21 职场文书
python操作xlsx格式文件并读取
2021/06/02 Python
《英雄联盟》2022日蚀、月蚀皮肤演示 黑潮亚索曝光
2022/04/13 其他游戏