gpt4 book ai didi

angularjs - 如何为首次 SPA 访问缓存创建 "loading screen"

转载 作者:行者123 更新时间:2023-12-03 07:58:15 25 4
gpt4 key购买 nike

我使用 Hot Towel 创建了一个单页应用程序。

当我开始缓存时,我有这个“第一次加载屏幕”。我删除了它,但我不知道如何重新实现它。我还添加了很多其他框架,从那时起我的网页变得更加复杂。我仍然主要使用 RequireJS、Knockout 和 AngularJS。

我不知道该怎么做。

我不记得它最初是如何完成的,而且我在谷歌搜索如何实现它时遇到了麻烦。

任何人都可以指出我正确的方向吗?

最佳答案

也许像下面这样

<div class="loadingScreen" ng-show="!isLoaded">
<div>Loading...</div>
</div>
<div class="container ng-hide" ng-show="isLoaded" >
Page Content
</div>

JS
angular.module('myApp').controller("itemController", function($scope, itemService){
$scope.isLoaded = false;
...Other stuff down here...

//After your ajax call that saturates your view, set $scope.isLoaded = true;
itemService.getItems().success(function(data){
$scope.isLoaded = true;
});
}

CSS
.loadingScreen{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: white;
text-align: center;
-webkit-transform-style: preserve-3d;
}

.loadingScreen > div{
position: absolute;
top: 47%;
left: 47%;
}

关于angularjs - 如何为首次 SPA 访问缓存创建 "loading screen",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23317100/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com