5

我一直使用的方法是在<html>标签上添加一个 .no-js 类，然后在用户浏览器中启用 JavaScript 的情况下使用剥离标签并用 js 替换它的modernizr。

基本上，我已经构建了一个 CSS3 移动和桌面导航。如果有 CSS 过渡等（使用modernizr 检查）以及是否有 js 或无 js，我有样式来改变其行为。

问题是，在 JavaScript 有时间加载并将类更改为 js 之前，我得到了 no-js 版本的闪光。（因为默认类是no-js）

我无法理解的是如何找到解决此问题的方法。如果我将 js 特定代码作为主类，然后使用前缀 .no-js 指定另一个代码，即使启用了 js，它也会闪烁 no-js。如果我切换它，它会做同样的事情......

也许我很愚蠢，但任何指针都会很棒。

4

2 回答 2

9

Paul Irish 有一篇关于处理这个问题的优秀博客文章。这是该帖子的解决方案：

<!DOCTYPE html>
<html lang='en' class='no-js'>
    <head>
        <script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
        ...

关键是确保您在浏览器有机会呈现任何内容之前更新了类名。

于 2013-04-05T13:42:37.857 回答
5

您可以在最顶部添加一个简短的脚本<head>：

<script>
  document.documentElement.className =
    document.documentElement.className.replace('no-js', 'js');
</script>

也不要忘记<noscript>标签，它在启用 JavaScript 时会被忽略。

于 2013-04-05T13:41:42.700 回答