Question

我有一个视图需要大约3秒才能渲染。在此期间，用户没有看到页面上发生的任何事情。我试图添加微调器，但它没有旋转，它只是卡住了。我认为这是因为浏览器正在等待JS代码完成并且无法控制旋转器直到那个。因此，如果原因恰恰是JS代码运行了3秒钟并且浏览器在此期间无法执行任何操作，我该如何优化它？如果我没有使用该框架，我可以将我的代码分成几个块并使用超时运行它们但不确定在链接阶段我如何使用Angular。

更新：
添加了jsfiddle来证明问题。当代码执行在循环中时，微调器不会旋转。

<img src="http://content.markitcdn.com/corporate/ResourceManager/9Iy-xMz_zHH-zXFAlhM-KA2/d/f/635151312565356632/Content/Images/Icons/General/spinner2.gif" alt="">
<script>
    console.log('entering loop')
    for (var i=0;i<300000000;i++) {}
    console.log('leaving loop')
</script>

Answer 1

我在控制器中遇到类似的问题，该控制器从SQL Server获取并显示数据库列表。我希望在返回数据之前显示等待光标，但是UI被冻结了。我通过isWaiting方法切换$rootScope标志（导致等待光标显示在视图中）然后在异步过程结束时清除回调中的那个标志来解决它。 / p>

这不是你想要做的，但它可能足够接近适应。您可能可以在$scope上使用方法而不是$rootScope用于您的目的，并且具有控制是否显示微调器图像的div级别（而不是html级别）。

免责声明：这是在使用node-webkit的桌面应用程序中使用的，而不是普通的浏览器。但我认为这种基本方法也适用于普通的浏览器。

CSS：

html.wait, html.wait * {
  cursor: wait !important;
}

MainController：

// sets up a method that can be used from any controller
$rootScope.toggleWaiting = function (isWaiting) {
    $rootScope.isWaiting = isWaiting;
    $('html')[isWaiting ? 'addClass' : 'removeClass']('wait');
};

DatabasesController：

.controller('databasesController', ['$rootScope', '$scope', function($rootScope, $scope) {

    $rootScope.toggleWaiting(true);

    var SqlServerHelper = require("SqlServerHelper");
    var sqlServerHelper = new SqlServerHelper(/* sensitive config info removed */);

    sqlServerHelper.getDatabases(function(err, results) {
        /* standard error handling removed */
        $scope.$apply(function() {
            $rootScope.toggleWaiting(false);
            $scope.databaseList = results;
        });
    });

}])

P.S。最后一个想法：如果gif仍然显示为冻结，可以使用控制器中的$timeout启动长时间运行的进程，因此它发生在异步后台线程上。（虽然我认为它无论如何都会在幕后工作，取决于它究竟在做什么需要这么长时间......大概是以异步方式调用外部资源开始？）

Answer 2

以下是我在角度应用上实现加载程序的方法。这很简单。我使用下面的less文件，它可以很容易地翻译成CSS：

.loader{
    position: fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0, 0, 0, 0.45);
    z-index: 9999999999;

    i{
        font-size:80px;
        height:80px;
        width:82px;
        color:#fff;
        display:block;
        text-align: center;
        vertical-align:middle;
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }
}

然后你可以将这个html添加到ng-view中：

<div class="loader show">
    <i class="fa fa-circle-o-notch fa-fw fa-spin"></i>
</div>

请注意，我使用font-awesome而不是.gif文件来加载动画。

以下是进一步阅读的一些资料来源：

http://fontawesome.io

http://blog.madnesslabs.net/madness-u-package-managers/＆lt; - 来自Madness Labs的博客文章，介绍如何使用包管理器安装Font-Awesome，angular，angular-route等依赖项。

Answer 3

不了解角度应用程序，但对于浏览器而言，有一个值得一看的小提琴......用于制作好动画的工作少http://jsfiddle.net/qzLdjq3c/5/

$(window).load(function() {
    $('.spinner').show();
    $(".spinner").hide();
});

Answer 4

这可能是ng-cloak

的合适人选

编译期间删除了ng-cloak类。通常它与display：none一起使用，但您也可以使用它来显示微调器。

在角度连接阶段显示微调器

4 个答案: