Question

我的网络应用程序显示一秒钟的身体背景，然后当我从一个页面路由到另一个页面时，它会加载动态背景。我试图通过使用AngularJS添加启动画面来删除该白色闪光。我查看了一些教程，但无法找到确切的解决方案。如何在我的div背景加载之前避免显示白色身体背景？有什么建议吗？

HTML

    <body class="hold-transition skin-blue sidebar-mini sidebar-collapse"> 
     <div class="wrapper"  ng-style="{'background': backgroundImg}" >
      <div class="content-wrapper">
        <section class="content">
          <div ng-view></div>
        </section>
      </div>
     </body>

我的路线

$routeProvider.when('/about',{
    templateUrl:'partials/about.php',
    controller: 'pageController'
});

我的控制器

app.controller("pageController",function($scope, $rootScope){
$scope.title = "About Us";
$rootScope.backgroundImg="url('http://abounde.com/uploads/images/abt-min.jpg')";   //abt bg
$scope.$on('$viewContentLoaded', function() {
   console.log("about page loaded");
});

}）;

Answer 1

在这个特定的页面上，你可以有一个包装整个文档的div。

给这个div一个带css的类，即.document-wrapper-invisible

在你的css中给.display-none类显示无属性的显示属性

.dislay-none {
display: none;
}

运行视图内容加载功能时，请删除此类。您可以简单地将变量设置为true，并使用ng-class有条件地删除该类。即

<div ng-class="{display-none: !documentLoaded}">
// your page content
</div>

控制器中的

$rootScope.$on('$viewContentLoaded', function() {
   console.log("about page loaded");
   $scope.documentLoaded = true;

});

这些行中的某些内容应该可以工作（我只使用rootScope作为viewContentLoaded事件，如果$ scope对它自己有效的话那么好）

Answer 2

根据我的理解，pb是当你路由到另一个页面然后你发起一个新的请求，用你的网址（...）下载你的背景。因为这个请求可能需要一些时间，所以你有白屏。

因此，当您打开应用程序时，解决方案可能是“预加载”所有背景图像。因此，在您的应用程序上显示任何内容之前，您可以显示“loading ...”div。在后台下载所有背景。

完成此操作后，在更改路径时，只需将包装器div的css类更改为包含正确背景图像的css类。

由于新的背景图片未加载

2 个答案: