每次刷新显示出溅出的屏幕

Question

我在3秒钟的应用程序启动上显示了我的飞溅屏幕

<script>
    var body = document.getElementsByTagName('body')[0];
    setTimeout(function () {
        body.setAttribute('ng-app', 'app');
        angular.bootstrap(body, ['ng', 'app']);
    }, 3000);
</script>

我在ng-cloak上有一个带有样式的Div

<div class="splash img-responsive" ng-cloak="">
<div id="imageContainer">
</div>

我的CSS飞溅是

.splash {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /*filter: alpha(opacity=60);*/
    /*opacity: 0.6;*/
    background-image: url(../images/img.jpg);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    display: none;
}

我只在Angular应用程序启动时需要的飞溅屏幕，但这在每个页面上都显示出刷新/重新加载。如何避免这种情况并仅在应用程序开始时显示Splash屏幕。

Answer 1

您只能在想要

时使用自己的方法显示splashscreen

删除允许SplashScreen出现的JS代码，您需要做的就是在前景上显示图像以显示的图像(由HTML(隐藏整个索引页。3秒钟后，您可以将该图像设置为display=none;并完成技巧。

此逻辑使您可以任意决定何时显示飞溅图像，何时隐藏它或何时不显示它。

Answer 2

最简单地解决了问题！在我的控制器中，写了这件代码

 $scope.showDiv = true;
        $scope.hide = function () {
            $scope.showDiv = false;
            $timeout(function () {
                $scope.showDiv = true;
            }, 3000);
        }

所以现在我想在应用程序开始和2-3秒显示登录框

之后

 <div class="login-page">
    <div class="form-page" ng-init=hide() ng-show="showDiv"></div></div>

能够显示3秒的飞溅屏幕并显示登录框