时间戳

首页 > 解决方案 > 防止使用 jquery 函数加载原始 DOM 状态

javascript - 防止使用 jquery 函数加载原始 DOM 状态

问题描述

对不起，如果我的标题措辞不佳。我有一个浅色主题和深色主题的切换。我可以使用 jquery 将选定的主题保存在 cookie 中，如下所示：

jQuery(document).ready(function ($) {
  $(".theme__switch").on("click", () => {
    $(".theme__switch").toggleClass("active");
    $("body").toggleClass("dark__theme");
    $.cookie("toggle", $(".theme__switch").hasClass("active"));
  });

  if ($.cookie("toggle") === "true") {
    $(".theme__switch").addClass("active");
    $("body").addClass("dark__theme");
  }
});

所以当我用深色主题刷新页面时，它会等待文档完全加载，然后添加类，所以我会得到一个白色的闪烁（原始 bg）。

我尝试了几种解决方案，例如通过在以下位置放置一个小<script>标签来阻止页面呈现<head>：

<script>
  // Render blocking JS:
  if ($.cookie('toggle') === 'true') document.documentElement.setAttribute("class", dark__theme);
  </script>

这个解决方案几乎可以工作，它可以防止白色闪烁，但是当我改回浅色主题时，dark__theme文档周围有一个非常轻微的颜色边框，如果你滚动到页面的顶部或底部，它的dark__theme颜色而不是白色，所以我认为这对用户来说会很奇怪。

这个解决方案还需要我在<head>其中加载我不太满意的 jquery 和 jquery-cookie 库，但是如果有一种方法可以让这种方法起作用，我会接受它，因为它是一个相当小的项目。

我也尝试过创建一个叠加层：

<div id="overlay"></div>

#overlay {
   position: fixed;
   top: 0;
   right: 0;
   left: 0;
   bottom: 0;
   background: #fff;
}

然后将其添加到我的原件中jQuery(document).ready(function ($) {

jQuery('#overlay').hide();

但这个解决方案对我不起作用。

有没有人对这个问题有任何聪明的解决方案，或者应该重新开始并找到一种保存黑暗主题的新方法？

感谢您的关注！

标签： javascripthtmljquerycss

解决方案

由于客户端和服务器端语言都可以访问 cookie，因此您可以执行以下操作。

您使用您的服务器端语言访问 cookie，并根据所选的 cookie 更改服务器端的主体类。

通过这样做，当 HTML 到达浏览器时，body 的类就已经被应用了。

推荐阅读