页面重载时toggle-buttons闪烁求助：如何维持opacity-0隐藏状态

问题根源在于你用了window.onload触发状态恢复——这个事件要等页面所有资源（包括图片、样式表）完全加载完成后才会执行，这时候浏览器已经把未隐藏的Toggle按钮渲染到页面上了，之后再设置opacity-0就会出现“先显示再隐藏”的闪烁。

可以通过以下几种方法解决：

方法1：提前执行脚本，不等window.onload #

把恢复状态的代码移到DOM元素加载完成后立刻执行，而不是等所有资源加载完。可以直接把脚本放在Toggle按钮的HTML后面同步执行：

示例代码（放在Toggle按钮HTML之后）： #

// 直接同步执行，不用等window.onload
const clickedToggle = localStorage.getItem("clicked");
if (clickedToggle) {
  toggleHide(clickedToggle);
  switch(clickedToggle) {
    case "toggle1":
      theme1();
      break;
    case "toggle2":
      theme2();
      break;
    case "toggle3":
      theme3();
      break;
  }
}

方法2：用CSS默认隐藏，脚本控制显示 #

先通过CSS默认把所有Toggle按钮设为隐藏，再让脚本给选中的按钮设置可见状态，这样浏览器渲染时初始就是隐藏状态，不会闪烁：

步骤1：修改CSS #

.toggle-button {
  opacity: 0; /* 默认隐藏所有按钮 */
}
.toggle-button.active {
  opacity: 1; /* 选中的按钮显示 */
}

步骤2：修改状态恢复逻辑 #

// 重写toggleHide函数，改为给目标按钮加active类
function toggleHide(targetId) {
  // 移除所有按钮的active类
  document.querySelectorAll(".toggle-button").forEach(btn => {
    btn.classList.remove("active");
  });
  // 给目标按钮加active类
  document.getElementById(targetId).classList.add("active");
}

// 页面加载早期执行状态恢复
const clickedToggle = localStorage.getItem("clicked");
if (clickedToggle) {
  toggleHide(clickedToggle);
  // 应用主题
  if (clickedToggle === "toggle1") theme1();
  else if (clickedToggle === "toggle2") theme2();
  else if (clickedToggle === "toggle3") theme3();
}

方法3：在<head>中监听DOMContentLoaded #

如果不想把脚本放在HTML中间，可以在<head>里添加脚本，监听DOMContentLoaded事件（DOM加载完成就触发，比window.onload早很多）：

<head>
  <!-- 你的CSS和其他资源 -->
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const clickedToggle = localStorage.getItem("clicked");
      if (clickedToggle) {
        toggleHide(clickedToggle);
        switch(clickedToggle) {
          case "toggle1":
            theme1();
            break;
          case "toggle2":
            theme2();
            break;
          case "toggle3":
            theme3();
            break;
        }
      }
    });
  </script>
</head>

这些方法的核心都是在浏览器渲染Toggle按钮之前就设置好隐藏状态，避免出现“先显后隐”的视觉闪烁。

内容的提问来源于stack exchange，提问作者Mohammad Mustak Absar Khan