时间戳

首页 > 解决方案 > 在 JS 之前加载 CSS 会导致不良影响

javascript - 在 JS 之前加载 CSS 会导致不良影响

问题描述

继续我前几天发布的一个问题，该问题得到了慷慨的回答。

我正在使用 localstorage 来调用“折叠”或“扩展”侧边栏的选定状态。但是，当使用存储的“折叠”大小重新加载页面时，侧边栏首先以全宽加载，然后在页面的其余部分加载时转换为折叠状态。

这是我正在使用的一个jsfiddle （但是，这里没有看到 css/javascript 延迟问题，所以我认为这仅供参考）。

$('document').ready(function() {
  // Code responsible for setting localStorage and toggling when toggle button is clicked.
  $('.collapse-toggle').on('click', function(e) {
    localStorage.setItem('menu-closed', !$('#sidebar-wrapper').hasClass('collapsed'));
    $('#sidebar-wrapper').toggleClass('collapsed');
  });

  // Code responsible for reading the state of the menu out of localStorage
  var state = localStorage.getItem('menu-closed');

  // When localStorage is not set, open the menu.
  if (state === null) {
    $('#sidebar-wrapper').removeClass('collapsed');
  } else {
    // When localStorage is set, Save the state to the variable closed
    // Here set closed to a boolean true/false value instead of a string "true" or "false"          
    var closed = state === "true" ? true : false;
    $('#sidebar-wrapper').addClass('collapsed');
    // When the state of the menu is not closed, remove the collapsed class from the sidebar.
    if (!closed) {
      $('#sidebar-wrapper').removeClass('collapsed');
    }
  }
});

我尝试将 JS 尽可能地移到 CSS 之上，但无济于事。我考虑过在两个完全不同的侧边栏 div 之间进行交换，在切换选择上隐藏对立的 div，但后来我错过了一个不错的 css 过渡，感觉这不是最干净的解决方案。

我能做些什么？

标签： javascriptcssperformancelocal-storageuser-experience

解决方案

推荐阅读