Angularjs 和流畅的页面加载

Question

我有一个 Angular Controller ，可以从服务器加载 4-5 个不同的资源。收到这些资源后，UI 会为页面填充必要的内容。我现在遇到的问题是页面加载不是很流畅。页面的布局立即加载，然后不同的元素在接下来的 1-2 秒内出现。加载时间不是真正的问题，只是它的突然性。有没有标准的方法来处理这个问题？

Answer 1

我使用的一个技巧是将所有内容默认为不透明度 0，然后使用 CSS 转换在大约 250 毫秒(快速淡入淡出)内将它们转换为不透明度 1。我使用 ng-class 指令在完成加载后应用一个类。

给这个代码:ng-class='{showme:hugeArray}'它应该在 hugeArray 时应用一个类加载完毕。在 HugeArray 加载或存在之前，它将是未定义的，因此为 false 和类 showme不会被应用。当hugeArray从你的资源回来，它存在。

只需将它与这个 CSS 结合起来:

.something {
    opacity: 0;
    text-align: center;
    -webkit-transition: opacity 0.25s ease-in;
    -moz-transition: opacity 0.25s ease-in;
    -o-transition: opacity 0.25s ease-in;
    -ms-transition: opacity 0.25s ease-in;
    transition: opacity 0.25s ease-in;
}
.something .showme{
    opacity: 1;
}