Question

我被教导使用它，现在有一点问题：

<html>
    <body>
        <div id="mytext">text</div>
        <script type="text/javascript" src="my.js"></script>
        <script type="text/javascript">hideMyText();</script>
    </body>
</html>

我的Js：

function hideMyText()
{
    $('#mytext').hide();
}

所以我按照我的说法做了，但文字现在闪烁了。它可见一会儿，然后消失。如何让它立即运行？我知道我应该用CSS隐藏它 - 但它可能有不同的任务要做（比如这里，突出显示文字：http://jsfiddle.net/UPs3V/291/）

Answer 1

您所看到的有时被称为 FOUC “Flash of Unstyled Content”

这是因为您的脚本位于页面末尾。浏览器将呈现它到目前为止所拥有的内容，然后暂停以从服务器获取脚本。但在这个差距期间，您将在任何脚本运行之前看到“原始”页面。

现在，理论上你应该有一个干净且可呈现的页面，以防JavaScript由于某种原因无法加载（或者有人仍使用NoScript ...）

防止此FOUC的一种方法是将脚本放在<head>中。这可能会导致加载页面时出现轻微延迟，特别是如果您有大脚本，但它允许您为DOMContentLoaded事件注册事件处理程序，这允许您在浏览器获得机会之前立即操作页面实际呈现它。

将脚本放在HTML的底部是否总是好的？

1 个答案: