在绘制 DOM 时显示加载微调器答案

【问题标题】：Display a loading spinner while DOM is being painted在绘制 DOM 时显示加载微调器
【发布时间】：2016-06-20 15:10:49
【问题描述】：

我正在开发一个 cordova android 应用程序，并且希望在加载用户通知时显示某种加载消息/微调器，因为在使用所有通知绘制 DOM 时有一点等待。

我们目前在一些地方使用 cg-busy 指令来在 ajax 调用完成时的等待时间内显示微调器。但是在这种情况下，cg-busy 并没有完成我们想要的，因为 ajax 调用非常快，而且绘制需要很长时间。

所以我的问题是：有没有办法让 cg-busy 在绘制 DOM 时显示其微调器，或者如果没有，我们可以使用类似的东西在绘制期间显示微调器吗？

【问题讨论】：

标签： android angularjs cordova

【解决方案1】：

我所做的是显示一个简单的 CSS 动画，直到 angular 完成初始化。那里有很多纯 CSS 加载动画，你可以谷歌一些。我将在此示例中使用those 之一。

那么这是如何工作的呢？我将以下div 添加到我的html：

<div class="loadingAnimation" ng-show="::false"></div>

还有以下 CSS：

.loadingAnimation {
    width: 40px;
    height: 40px;
    margin: 100px auto;
    background-color: #3b454b;
    border-radius: 100%;
    -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
    animation: sk-scaleout 1.0s infinite ease-in-out;
}

@-webkit-keyframes sk-scaleout {
    0% {
        -webkit-transform: scale(0);
    }

    100% {
        -webkit-transform: scale(1.0);
        opacity: 0;
    }
}

@keyframes sk-scaleout {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    100% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
        opacity: 0;
    }
}

一旦 angular 完成初始化，它将评估 ng-show 并隐藏加载动画。 :: 只是性能改进。

我不能 100% 确定这是否是您想要的行为，因此您可能需要调整 ng-show 的条件。但我希望你明白了。

【讨论】：

谢谢，这实际上完全符合我的需要。非常感谢。