Question

我想知道我是否可以做以下事情：

加载html页面并使用javascript动态设置body元素的背景颜色，在本例中使用jquery脚本。如果在执行js之前加载页面元素，则主体颜色将为白色一秒钟，然后它会更改颜色。如果js将在渲染html之前加载，那么我们还没有一个机构尚未应用更改吗？还是我错了？能否请您给我一个提示最佳解决方案？非常感谢

问候

Answer 1

当DOM树准备就绪时，您可以绑定要触发的事件，这通常是在页面显示之前。

http://docs.jquery.com/Events/ready

我将此用于不显眼的javascript以尽快开始更改页面，因此用户看不到由于javascript而发生的任何更改。

编辑：还有另一个解决方案，这个解决方案并不理想，但可以正常工作。让主div被隐藏，因此在DOM树完成之前不会显示任何内容，并且javascript会将主div更改为可见。

另一种选择是将javascript放在html的末尾，并让它立即设置颜色，但这是一个非常时间的解决方案。

Answer 2

在大多数情况下，使用DOMContentLoaded（或等效的黑客攻击）就足够了。如果HTML代码的解析被延迟（例如，由于服务器或客户端计算或连接缓慢）或者 - 如在您的情况下 - 不期望的视觉效果，则存在问题;我写了关于分块转移some time ago的问题。

通过在相关元素之后直接向script添加body元素，您应该体验到最短的时间延迟（有关何时出现问题，请参阅this question。）

更改body颜色的示例如下所示：

<body>
 <script type="text/javascript">
 document.body.style.background = 'green';
 </script>

Answer 3

<body>标记可能不是最早的渲染背景。 <html>元素本身也可以具有背景颜色，并且在主体未完全覆盖视口时通常可见。

因此，如果您在尚未解析body标签的标头中放置脚本，则可以简单地设置document.documentElement样式，直到HTML解析器创建了body元素。

在脚本之前加载的页面元素

3 个答案: