代码之家 › 专栏 › 技术社区 › Daniel Naab

如何消除渲染后的“闪烁”?

dom ajax html jquery javascript

Daniel Naab · 技术社区 · 17 年前

在某些情况下,DOM节点只有在浏览器中启用Javascript时才可见。在其他情况下,它应仅在禁用时可见。例如,表单上的submit按钮有一个下拉列表,其中包含一个自动提交的onchange处理程序(使用JQuery的表单插件):

<form method="post" action=".">
    <label for="id_state">State:</label>
    <select name="state" id="id_state" onchange="$(this.form).ajaxSubmit(ajax_submit_handler);">
        <option value="AL">Alabama</option>
        <option value="AK">Alaska</option>
    </select>
    <input class="with_js_disabled" type="submit" value="OK" />
</form>

<script type="text/javascript">
    $(document).ready(function()
    {
        $(".with_js_disabled").hide();
    });
</script>

启用Javascript时,不需要提交按钮(由于onchange处理程序)。但是,JQuery的$(document).ready函数(以及更直接的document.onload)只有在页面完全加载和呈现后才被调用-因此,提交按钮最初会显示,当执行Javascript并且节点的显示设置为“none”时会出现“flash”。

编辑:

<noscript> 下面很多人提到的解决方案似乎很有希望,但在Safari上对我不起作用。然而,普雷斯托尔的第二个建议非常有效:

<body>
    <script type="text/javascript">
        document.body.className += ' has_js';
    </script>
    <!-- the rest of your page -->
</body>

然后可以使用直接CSS设置样式:

body .js_enabled_only { display: none; }
body .js_disabled_only { display: block; }
body.has_js .js_enabled_only { display: block; }
body.has_js .js_disabled_only { display: none; }

6 回复 | 直到 17 年前

Prestaul 17 年前

结合以下几种解决方案如何:

<style type="text/javascript">
    .only-without-script {
        display: none;
    }
</style>
<noscript>
    <style type="text/javascript">
        .only-with-script {
            display: none;
        }
        .only-without-script {
            display: block;
        }
    </style>
</noscript>

或者我更喜欢在主体中添加类(放置 <script>

<head>
    <style type="text/javascript">
        body.has-script .something-not-ajaxy {
            display: none;
        }

        input.ajaxy-submit {
            display: none;
        }
        body.has-script input.ajaxy-submit {
            display: inline;
        }
    </style>
</head>
<body>
    <script type="text/javascript">
        document.body.className += ' has-script';
    </script>
    <!-- the rest of your page -->
</body>

Paolo Bergantino 17 年前

<noscript> 标签没有人提出过这个建议,所以我不确定这是否被认为是关于这些部分的不好的做法,但这是我使用的,并且对我有效。

如果只希望在启用Javascript时节点可见,可以在头部执行以下操作:

<noscript>
    <style type="text/css">
    .js-enabled { display: none; }
    </style>
</noscript>

然后给任何纯Javascript元素一类 js-enabled

sth 17 年前

正如David所说,您可以添加Javascript,添加样式表以隐藏所有“不必要的”html元素:

<head>
  ...
  <script type="text/javascript" language="javascript">
    document.write('<style type="text/css"> .disabled-if-javascript { display: none; } </style>');
  </script>
</head>
...

如果启用了Javascript,它会在加载主体之前将类“disabled If Javascript”的所有元素设置为hidden。如果启用了javascript,只需将该类添加到所有需要隐藏的元素中。您可能还需要启用一个类(如果javascript的作用正好相反),以显示非javascript隐藏的某些元素。也许你需要加上“ !important “在那里修改样式定义,以覆盖现有(非javascript)规则。

Eran Galperin 17 年前

1-预先检测是否启用了Javascript,并将该信息保存在cookie/会话中。这可以在头版完成,应该可以消除大多数闪烁。

livequery plugin ,它在元素添加到DOM时检测元素。当Javascript完成加载时,您可以正确地运行它,这应该比文档(它在头部)要早得多。

$('.with_js_disabled').livequery(function() {
     $(this).hide();
});

David Z 17 年前

只是想一想:我不确定这是否有效,但您可以尝试在文档头中添加一些Javascript,以编写一个CSS样式的元素来隐藏按钮。

David Hellsing 16 年前

一个简单的尝试:添加 <script>jQuery.ready();</script> 就在关闭body标签之前。

这将强制触发与“就绪”事件的所有绑定。如果您在文档末尾激发它们,DOM将被加载并准备就绪,即使“本机”onDomContentLoaded事件尚未激发。

当我想消除闪烁时,这通常对我有效,尤其是在IE/win中,因为IE在jQuery的“ready”事件中有自己的domready emulator。