启动画面在 ASP.NET 中不断刷新

Question

我想显示一个启动画面，当我第一次运行我的程序时，会显示启动画面，然后将用户重定向到主页。我正在关注此代码块的教程，它将用户重定向到http://www.google.com，所以没问题。但我想将用户重定向到我的 asp.net 页面，即 GetGoogleDriveFiles 视图。我试着这样做。

当我运行它时，它会首先显示启动画面。然后几秒钟后，它将重定向到程序的主页。但在一秒钟内，它会自行刷新并再次循环启动屏幕和整个过程。

<script type="text/javascript">

    (function () {

        var preload = document.getElementById("preload");
        var loading = 0;
        var id = setInterval(frame, 64);

        function frame() {
            if (loading == 100) {
                clearInterval(id);
                window.location.href = "/Home/GetGoogleDriveFiles";
            }
            else {
                loading = loading + 1;
                if (loading == 90) {
                    preload.style.animation = "fadeout 1s ease";
                }
            }
        }
    })();
</script>

如何确保程序运行后，它会将用户重定向到我的程序的主页，而不是不断地再次刷新自己？

添加了 CSS 并使用新的 JS 进行了更新

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: monospace;
}

.preload {
    width: 100%;
    height: 100%;
    background: #333;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
}

.logo {
    width: 300px;
    height: 70px;
    margin: 150px auto 50px auto;
    font-size: 50px;
    text-shadow: -1px 2px 2px #000;
    text-align: center;
    color: azure;
}

.loader-frame {
    width: 70px;
    height: 70px;
    margin: auto;
    position: relative;
}

.loader1, .loader2 {
    position: absolute;
    border: 5px solid transparent;
    border-radius: 50%;
}

.loader1 {
    width: 70px;
    height: 70px;
    border-top: 5px solid azure;
    border-bottom: 5px solid azure;
    animation: clockwisespin 2s linear 3;
}

.loader2 {
    width: 60px;
    height: 60px;
    border-left: 5px solid darkturquoise;
    border-right: 5px solid darkturquoise;
    top: 5px;
    left: 5px;
    animation: anticlockwisespin 2s linear 3;
}

@@keyframes clockwisespin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@@keyframes anticlockwisespin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

@@keyframes fadeout {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

 <div class="preload" id="preload">
    <div class="logo">
         Loa<span style="color: darkturquoise;">ding</span>
    </div>
    <div class="loader-frame">
        <div class="loader1" id="loader1"></div>
        <div class="loader2" id="loader2"></div>
    </div>
</div>

<script type="text/javascript">
    var timeOutInMilliSeconds = 10000;
    setTimeout(function () {
        location.href = "/Home/GetGoogleDriveFiles";
    }, timeOutInMilliSeconds);
</script>

我已经更新了 css 和 js 代码，但仍然显示初始屏幕，但不断循环并且不显示 GetGoogleDriveFiles 页面。

Answer 1

在我看来，脚本可以简单得多。就像下面的脚本一样，它会在 5 秒后转到新的 url。您可以在此期间做任何您想做的事情，例如显示初始屏幕。

<script type="text/javascript">

    var timeOutInMilliSeconds = 5000;

    setTimeout(function () {
        location.href = "/Home/GetGoogleDriveFiles";
    }, timeOutInMilliSeconds);

    //do stuff here before redirect, like showing splash screen

</script>