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 相关文章推荐
JS input 数字验证代码
Jul 30 Javascript
使用SyntaxHighlighter实现HTML高亮显示代码的方法
Feb 04 Javascript
原生javascript实现图片轮播效果代码
Sep 03 Javascript
jquery实现的树形目录实例
Jun 26 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
Aug 27 Javascript
浅析Ajax语法
Dec 05 Javascript
Angular.js实现动态加载组件详解
May 28 Javascript
js实现canvas图片与img图片的相互转换的示例
Aug 31 Javascript
详解使用webpack打包编写一个vue-toast插件
Nov 08 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
Mar 12 Javascript
JavaScript使用ul中li标签实现删除效果
Apr 15 Javascript
Javascript异步编程async实现过程详解
Apr 02 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动态生成虚拟现实VRML网页
2006/10/09 PHP
php生成图片验证码
2015/06/09 PHP
PHP+HTML+JavaScript+Css实现简单爬虫开发
2016/03/28 PHP
PHP7引入的&quot;??&quot;和&quot;?:&quot;的区别讲解
2019/04/08 PHP
PHP实现简易图形计算器
2020/08/28 PHP
phpstorm最新激活码分享亲测phpstorm2020.2.3版可用
2020/11/22 PHP
Mozilla 表达式 __noSuchMethod__
2009/04/05 Javascript
javascript中的undefined 与 null 的区别  补充篇
2010/03/17 Javascript
js控制滚动条缓慢滚动到顶部实现代码
2013/03/20 Javascript
基于javascript实现tab选项卡切换特效调试笔记
2016/03/30 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
2016/05/10 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
2017/08/16 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
2017/12/07 Javascript
vue 中directive功能的简单实现
2018/01/05 Javascript
微信小程序实现侧边分类栏
2019/10/21 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
2019/11/09 Javascript
用JS实现一个简单的打砖块游戏
2019/12/11 Javascript
JS+DIV实现拖动效果
2020/02/11 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
2021/01/15 Javascript
[04:45]DOTA2上海特级锦标赛主赛事第四日RECAP
2016/03/06 DOTA
python实现去除下载电影和电视剧文件名中的多余字符的方法
2014/09/23 Python
在Python中使用M2Crypto模块实现AES加密的教程
2015/04/08 Python
简单学习Python time模块
2016/04/29 Python
Python的Twisted框架上手前所必须了解的异步编程思想
2016/05/25 Python
使用python编写udp协议的ping程序方法
2018/04/22 Python
Python实现的远程文件自动打包并下载功能示例
2019/07/12 Python
如何基于Python制作有道翻译小工具
2019/12/16 Python
Django框架静态文件处理、中间件、上传文件操作实例详解
2020/02/29 Python
Python参数传递实现过程及原理详解
2020/05/14 Python
CSS3 icon font完全指南(CSS3 font 会取代icon图标)
2013/01/06 HTML / CSS
Mistine官方海外旗舰店:泰国国民彩妆品牌
2016/12/28 全球购物
印尼极简主义和实惠的在线家具店:Fabelio
2019/03/27 全球购物
商务日语专业毕业生求职信
2013/10/26 职场文书
服装设计专业自荐书范文
2013/12/30 职场文书
副科竞争上岗演讲稿
2014/05/12 职场文书
利用 Python 的 Pandas和 NumPy 库来清理数据
2022/04/13 Python