4

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

4

4 回答 4

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;
}
于 2013-08-05T17:41:42.837 回答
0

I think the other answers here are good, but ngCloak is worth mentioning too. It would probably be best used in combination with the some of the other methods.

http://docs.angularjs.org/api/ng.directive:ngCloak

于 2013-08-05T19:27:06.673 回答
0

如果您无论如何都必须在控制器中加载资源，则应将此逻辑移至$routerProvider resolve属性，以便加载的资源在解析后注入控制器。$route如果承诺被拒绝，服务将不会进行路由更改，因此当您的视图更改发生时，一切都在那里。

于 2013-08-05T19:31:20.367 回答
0

我能想到几种不同的方法，这里有一些。这里可能是一个简单的，您可以根据自己的需要进行更改。

HTML

<body ng-show="object.length"> ...

控制器

$scope.object = Object.query();

或者您可以使用 promise 对象来知道它们何时完成加载。我不知道您是否要在加载之前隐藏正文，同时显示它们，还是其他。

于 2013-08-05T17:52:45.410 回答