时间戳

首页 > 解决方案 > MVC 在初始加载时显示初始屏幕的最佳方式

javascript - MVC 在初始加载时显示初始屏幕的最佳方式

问题描述

我有一个方法，如果它是初始加载，那么将设​​置一个 cookie，并将其定向到启动屏幕。

大约 4 秒后，我需要将 html 重定向回设置 cookie 的视图并显示转到主页。问题是 4 秒后它只是重新加载页面并且启动动画不断发生。我需要它返回到 homecontroller 以便处理 cookie 方法

有没有最佳实践方法来做到这一点？根据要求需要启动画面。

在我的家庭控制器中

public virtual IActionResult Index()
{
    string splash = "splash"
    var splashKey = _httpContextAccessor.HttpCOntext.Request.Cookies["key"]

    if (Request.Cookies[splash] != null)
    {
        return View();
    }
    else
    {
        SetCookie(splash);

        return Redirect(Url.Content(Url.Content("`/Content/mysplash.html"));
    }
}

我的飞溅 html

<html>
<meta charset="UTF-8">
<head>

   splashstufff
</head>
<body>
<script>

    setTimeout(function() { window.location = "http://localhost:4200/" }, 4000);   <----Just loops here no redirect happens

</script>
</body>
</html>

标签： javascriptasp.net-coreasp.net-core-mvc

解决方案

您可以添加一个覆盖整个屏幕的绝对元素，并在需要时将其淡出，显示下方的页面

例如

setTimeout(function() {
  $('.splashscreen').fadeOut();
}, 4000);
.splashscreen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: white;
}

.splashscreen h1 {
  text-align: center;
  margin-top: 150px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<meta charset="UTF-8">

<head>

</head>

<body>
  <div class="splashscreen">
    <h1>Loading...</h1>
  </div>
  <div>
    <p> Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Pellentesque egestas, neque sit amet convallis pulvinar, justo nulla eleifend augue, ac auctor orci leo non est. Phasellus accumsan cursus velit. Nam pretium turpis et arcu. Sed
      a libero.
    </p>
    <p>
      Phasellus consectetuer vestibulum elit. Cras dapibus. Morbi mollis tellus ac sapien. Duis vel nibh at velit scelerisque suscipit. Morbi nec metus.
    </p>
  </div>
</body>

</html>

您可以在 div 中放置一些更高级的东西splashscreen，例如微调器或类似的东西。

推荐阅读