Question

我希望这是一个相当简单的问题。首先，我会说我正在使用jQuery和jscookie。

我有2个不同的CSS文件，一个浅色主题和一个黑暗主题。最初在<head>我有<link>标记：

<link id="theme" rel="stylesheet" href="css/dark.css" />

默认加载黑暗主题。

我有一种情况，用户可以使用按钮切换主题，该按钮还会更新cookie，说明他们的主题偏好。由于黑暗主题是默认主题，我们只需要检查用户是否具有“轻量级”主题作为其首选项。我有一些在头部运行的javascript，就在链接下面：

if(theme_preference == 'light') { // theme_preference is the value of the cookie
    jQuery('#theme').attr('href', 'css/light.css');
}

50％的时间此代码工作，主题在加载任何页面内容之前被更改，但是之前页面加载的其他50％（我假设？）jQuery运行，因此用户将从黑暗到光明的主题直观地看到页面。

我需要利用哪些事件/其他事项来确保此代码在用户看到任何屏幕之前执行并更新<link> href ？

非常感谢任何能指出我正确方向的人！

Answer 1

考虑到（正如我们在评论中讨论的那样），您也使用PHP。您可以让PHP读取cookie并使用该变量。由于PHP是在浏览器加载网站之前处理的，因此它将设置正确的配置。 Cookie是特定于浏览器的，而非特定于编程语言。以下是如何在PHP中执行此操作：http://www.w3schools.com/php/php_cookies.asp

在可加载可见页面之前加载CSS“主题”

1 个答案: