全网整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:400-708-3566

Angular.js中处理页面闪烁的方法详解

前言

大家在使用{{}}绑定数据的时候,页面加载会出现满屏尽是{{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://www./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()
 }
 }
 })

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对的支持。


# angularjs  # 页面闪烁  # 闪烁  # ng  # if  # AngularJS页面访问时出现页面闪烁问题的解决  # Angularjs在初始化未完毕时出现闪烁问题的解决方法分析  # AngularJS使用ng-Cloak阻止初始化闪烁问题的方法  # 加载  # 就会  # 绑定  # 这个问题  # 这种情况  # 可以使用  # 可以防止  # 是一个  # 情况下  # 让人  # 还没  # 放在  # 也会  # 很难  # 下了  # 所需  # 很喜欢  # 但这  # 很长  # 所示 


相关文章: 如何设置并定期更换建站之星安全管理员密码?  做企业网站制作流程,企业网站制作基本流程有哪些?  定制建站是什么?如何实现个性化需求?  如何用景安虚拟主机手机版绑定域名建站?  深圳网站制作案例,网页的相关名词有哪些?  企业网站制作公司网页,推荐几家专业的天津网站制作公司?  如何设计高效校园网站?  建站之星代理商如何保障技术支持与售后服务?  香港服务器租用每月最低只需15元?  武汉网站设计制作公司,武汉有哪些比较大的同城网站或论坛,就是里面都是武汉人的?  如何在宝塔面板中修改默认建站目录?  如何通过主机屋免费建站教程十分钟搭建网站?  如何用美橙互联一键搭建多站合一网站?  制作网站哪家好,cc、.co、.cm哪个域名更适合做网站?  建站之星好吗?新手能否轻松上手建站?  深入理解Android中的xmlns:tools属性  太原网站制作公司有哪些,网约车营运证查询官网?  广东专业制作网站有哪些,广东省能源集团有限公司官网?  宝塔面板创建网站无法访问?如何快速排查修复?  云南网站制作公司有哪些,云南最好的招聘网站是哪个?  定制建站平台哪家好?企业官网搭建与快速建站方案推荐  制作ppt免费网站有哪些,有哪些比较好的ppt模板下载网站?  胶州企业网站制作公司,青岛石头网络科技有限公司怎么样?  长沙做网站要多少钱,长沙国安网络怎么样?  如何在阿里云香港服务器快速搭建网站?  如何通过建站之星自助学习解决操作问题?  建站之星客服服务时间及联系方式如何?  Android自定义listview布局实现上拉加载下拉刷新功能  如何解决ASP生成WAP建站中文乱码问题?  西安大型网站制作公司,西安招聘网站最好的是哪个?  如何用VPS主机快速搭建个人网站?  电影网站制作价格表,那些提供免费电影的网站,他们是怎么盈利的?  网站视频制作书签怎么做,ie浏览器怎么将网站固定在书签工具栏?  整人网站在线制作软件,整蛊网站退不出去必须要打我是白痴才能出去?  定制建站哪家更专业可靠?推荐榜单揭晓  小捣蛋自助建站系统:数据分析与安全设置双核驱动网站优化  图片制作网站免费软件,有没有免费的网站或软件可以将图片批量转为A4大小的pdf?  网站制作公司广州有几家,广州尚艺美发学校网站是多少?  如何快速搭建二级域名独立网站?  如何在景安服务器上快速搭建个人网站?  网站制作新手教程,新手建设一个网站需要注意些什么?  如何快速搭建安全的FTP站点?  如何用y主机助手快速搭建网站?  如何通过VPS建站无需域名直接访问?  如何生成腾讯云建站专用兑换码?  ,怎么用自己头像做动态表情包?  已有域名如何免费搭建网站?  如何在云服务器上快速搭建个人网站?  如何快速生成高效建站系统源代码?  网站制作知乎推荐,想做自己的网站用什么工具比较好? 

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。