Question

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

Answer 1

我使用的一个技巧是将所有内容默认为不透明度0，然后使用CSS变换将它们转换为不透明度1超过约250毫秒（快速淡入淡出）。我在使用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;
}

Answer 2

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

HTML

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

控制器

$scope.object = Object.query();

或者你可以使用promise对象知道他们何时完成加载。我不知道你是否想要隐藏身体，直到它们被加载，同时显示它们或其他。

Answer 3

我认为这里的其他答案都很好，但ngCloak也值得一提。它可能最好与其他一些方法结合使用。

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

Answer 4

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

Angularjs和平滑页面加载

4 个答案: