Заставка постоянно обновляется в 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

Мне кажется, что сценарий может быть намного проще. Как и в приведенном ниже скрипте, который переходит на новый URL через 5 секунд. Вы можете делать то, что хотите в этот период, например, показывать заставку.

<script type="text/javascript">

    var timeOutInMilliSeconds = 5000;

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

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

</script>