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

时间:2016-05-21 09:47:28

标签: javascript jquery css

我希望这是一个相当简单的问题。首先,我会说我正在使用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

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

1 个答案:

答案 0 :(得分:1)

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