javascript - 如何防止导航栏抖动？

Question

我正在开展一个小型个人项目，但有一个小问题，我不确定如何解决。我使用 Bootstrap4 、 ejs 模板引擎 和 express。我的项目有一个导航栏，如果用户的话，我会在其中显示登录未登录，帐户则相反。

这是导航栏的相关部分:

<div class="collapse navbar-collapse" id="navbarSupportedContent">
  <ul class="navbar-nav ml-auto ">
    <li class="nav-item  navbar-item">
      <a class="nav-link" href="/">Home </a>
    </li>
    <li class="nav-item navbar-item">
      <a class="nav-link" href="/">Some link </a>
    </li>
    <li class="nav-item navbar-item " id="nav-signIn">
      <a class="nav-link" href="/signIn">Sign in</a>
    </li>
    <li class="nav-item dropdown  navbar-item" id="nav-account">
      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
        aria-haspopup="true" aria-expanded="false">
        Account
      </a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
    </li>
  </ul>
</div>

这是控制在客户端显示内容的函数:

  function displayAccountOrSignIn() {
    if (!document.cookie.split(';').filter((item) => item.includes('logedIn=')).length) {
      document.querySelector('#nav-account').style.display = 'none'
    }
    else {
      document.querySelector('#nav-signIn').style.display = 'none'
    }
  }

我的问题是导航栏“抖动”，因为它首先加载 HTML，然后隐藏不应该显示的内容。我可以通过检查服务器上的 cookie 来修复它，然后有条件地渲染导航栏的部分内容，但我认为这样做不是一个好主意。如果有任何建议，我将不胜感激。

Answer 1

这里有很多选项。要知道推荐哪一个，我们可能需要使用您的实际网站并尝试一些操作。所有这些都会起作用并防止显示不应该看到的内容，有些可能会更快显示。

1. 首先隐藏所有条件内容(这样就不会显示不应该显示的内容)，然后使用条件 Javascript 启用适当部分的显示。

2. 默认情况下，在 HTML 中隐藏整个工具栏，直到运行条件代码为止，然后仅在 Javascript 末尾确定其状态后才显示整个工具栏。如果需要，您可以将工具栏设置为 visibility: hidden而不是display: none这样它在最终显示时仍然占据适当的垂直高度，并且不会导致其他内容下移。

3. 在内联中运行条件脚本 <script>标签紧跟在工具栏 HTML 之后。这将确保脚本在工具栏 HTML 可用后尽快运行。您可以将此与上面的#1 或#2 结合起来。

4. 确定正确的服务器端工具栏，以便到达浏览器的 HTML 已经正确预先形成。由于服务器已经知道用户是否登录，因此这应该是可能的。