Angular js - 显示/隐藏每条新路线的加载 gif [英] Angular js - show/hide loading gif every new route

问题描述

我试图在每条新路线上切换(隐藏/显示)加载 gif，所以我的逻辑是:

I'm trying to toggle (hide/show) a loading gif on every new route, so my logic would be:

• routeChangeStart = 显示加载 gif
• routeChangeSuccess = 隐藏加载 gif

这是我的代码:

//ANGULAR
app.run(function($rootScope) {

   $rootScope.layout = {};
   $rootScope.layout.loading = false; 

   $rootScope.$on('$routeChangeStart', function() {

      //show loading gif
      $rootScope.layout.loading = true;

   });

   $rootScope.$on('$routeChangeSuccess', function() {

      //hide loading gif
      $rootScope.layout.loading = false;

   });

   $rootScope.$on('$routeChangeError', function() {

       //hide loading gif
       alert('wtff');
       $rootScope.layout.loading = false;
   });
});

//HTML

<img src="img/loading.gif" ng-hide="!layout.loading"/>

这很奇怪，因为这适用于更改了 3/4 条路线，然后在更改路线时停止工作:O

可能是什么?

感谢@Rob Sedgwick，这是一个活生生的例子:http://plnkr.co/edit/ZpkgRhEAoUGlnXjbLb8b

HERE IS A LIVE EXAMPLE thanks to @Rob Sedgwick : http://plnkr.co/edit/ZpkgRhEAoUGlnXjbLb8b

推荐答案

Short answer:$rootScope.layout.loading 更改为预期的.但是，如果加载了模板，浏览器就没有时间使更改可见.

Short answer: the $rootScope.layout.loading changed as expected. But if the templates are loaded the browser has no time to make the changes visible.

长答案:如果你把 console.log 输出放在你的 $on 监听器中，你会看到，$routeChangeStart 事件触发，模板被加载，然后 $routeChangeSuccess 触发.在幕后发生以下情况:

Long answer: if you put console.log outputs in your $on listeners you will see, that a $routeChangeStart event fires, the template is loaded and after that $routeChangeSuccess fires. Under the hood the following happens:

• $routeChangeStart 触发
• $rootScope.layout.loading 变为 true
• 模板异步加载
• DOM 已更新
• 浏览器呈现加载的 gif

稍后(xhr 请求返回)

a little bit later (the xhr request returns)

• 模板已加载
• $routeChangeSuccess 触发
• $rootScope.layout.loading 变为 false
• DOM 已更新
• 浏览器不再显示 gif

如果 tmeplates 被缓存会发生什么:- $routeChangeStart 触发- $rootScope.layout.loading 变为 true- $routeChangeSuccess 触发- $rootScope.layout.loading 变成 false- DOM 已更新(但与之前的状态相同)

what happens if the tmeplates are cached: - $routeChangeStart fires - $rootScope.layout.loading becomes true - $routeChangeSuccess fires - $rootScope.layout.loading becomes false - the DOM is updated (but this is the same state as before)

正如您所看到的，浏览器无法呈现新状态，因为脚本正在运行而不会中断，从而为浏览器提供了呈现 DOM 的时间.如果模板尚未加载，ajax 请求会停止脚本执行并给浏览器时间来呈现 DOM.

As you can see the browser can not render the new state because a script is running that is not interrupted to give the browser time to render the DOM. If the template is not yet loaded, the ajax requests stops the script execution and give's the browser time to render the DOM.

如何解决这个问题?

您可以使用 timeout 给浏览器时间来更新 DOM:

You can use a timeout that give's the browser time to update the DOM:

$rootScope.$on('$routeChangeSuccess', function () {
    console.log('$routeChangeSuccess');
    //hide loading gif
    $timeout(function(){
      $rootScope.layout.loading = false;
    }, 200);
});

这是您使用此解决方案的 plunkr:http://plnkr.co/edit/MkREo0Xpz5SUWg0lFCdu?p=预览

Here is your plunkr with this solution: http://plnkr.co/edit/MkREo0Xpz5SUWg0lFCdu?p=preview

这篇关于Angular js - 显示/隐藏每条新路线的加载 gif的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！