在渲染页面之前加载 javascript？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5642233/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Load javascript before rendering page?
提问by fille
I want to run some jquery code before my page have loaded. Im adding some classes which are changing the css with javascript, and when the page loads i see the "old" css for a short time. Any ideas? Thanks
我想在我的页面加载之前运行一些 jquery 代码。我添加了一些使用 javascript 更改 css 的类，当页面加载时，我会在短时间内看到“旧”css。有任何想法吗？谢谢
回答by T.J. Crowder
I want to run some jquery code before my page have loaded.
我想在我的页面加载之前运行一些 jquery 代码。
This is easily done; it's funny because much of the time, people are trying to do it the other way around.
这很容易做到；这很有趣，因为很多时候，人们都试图反过来做。
When the browser encounters a scripttag, barring your using a couple of special attributes (and the browser supporting them), all processing of the page comes to a screeching halt and the browser hands the script to the JavaScript engine. Only when the script completes does processing of the page continue.
当浏览器遇到script标记时，除非您使用几个特殊属性（以及支持它们的浏览器），否则页面的所有处理都会突然停止，浏览器将脚本交给 JavaScript 引擎。只有当脚本完成时，页面的处理才会继续。
So if you have a scripttag in the headsection of your page, you can output CSS classes via the document.writefunction:
因此，如果页面的某个部分中有一个script标记，则head可以通过该document.write函数输出 CSS 类：
<DOCTYPE html>
<html>
<head><title>Foo</title>
<script src='jquery.js'></script>
<script>
if (some_condition) {
document.write("<style>foo { color: blue; }</style>");
}
else {
document.write("<style>foo { color: red; }</style>");
}
</script>
Note that some_conditionin the above can only rely on, and refer to, the items above it in the document (since the browser hasn't done anything with the rest of the document yet, as it's waiting to see what document.writecontent the script is going to output).
请注意，some_condition上面只能依赖和引用文档中它上面的项目（因为浏览器还没有对文档的其余部分做任何事情，因为它正在等待查看document.write脚本将要执行的内容）输出）。
Live example(refresh it a few times, half the time it's red, half the time it's blue). It doesn't use jQuery, but you get the idea.
实时示例（刷新几次，一半是红色，一半是蓝色）。它不使用 jQuery，但您明白了。
回答by Oriol
Basically it's a similar problem as to implementing a loader/spinner. You show the animated gif to the user, and when the page finalizes loading, then you remove it.
In this case, instead of showing a gif, we show blank.
基本上这是一个与实现加载器/微调器类似的问题。您向用户显示动画 gif，当页面完成加载时，然后将其删除。
在这种情况下，我们不显示 gif，而是显示空白。
There are various ways of accomplishing this result. Here are few ordered in terms of ease and performance.
有多种方法可以实现这一结果。这里有几个在易用性和性能方面排序的。
Global CSS rule.
Hide thebodyon your global CSS file.body { display:none; }And once the document finishes loading, toggle the display:
// Use 'load' instead of 'ready' cause the former will execute after DOM, CSS, JS, Images are done loading $(window).load(function(){ $(body).show(); });Cover page with div layer
Hide the content with a div sitting on top of the page and remove it later.div#page_loader { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: white; z-index: 100; }JavaScript snippet
Hide thebodybefore the page renders:<body onload="document.body.style.display='none';">
全局 CSS 规则。
隐藏body全局 CSS 文件中的 。body { display:none; }一旦文档完成加载，切换显示：
// Use 'load' instead of 'ready' cause the former will execute after DOM, CSS, JS, Images are done loading $(window).load(function(){ $(body).show(); });用 div 层覆盖页面 用
位于页面顶部的div隐藏内容，稍后将其删除。div#page_loader { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: white; z-index: 100; }JavaScript 代码段在页面呈现之前
隐藏body：<body onload="document.body.style.display='none';">
If you use Modernizr, you could also leverage its CSS classes to hide/show the content depending on the user's device or browser.
如果您使用Modernizr，您还可以利用其 CSS 类根据用户的设备或浏览器隐藏/显示内容。
What I wouldn't recommend though, it's running jQueryscripts at the top of the page, cause that's going to add extra burden, and delay even further page rendering.
但我不推荐的是，它jQuery在页面顶部运行脚本，因为这会增加额外的负担，并延迟进一步的页面渲染。
回答by Lior Cohen
Assuming you're already using the onLoad event on body or using the jQuery ready callback, you could start with style="display:none;" on your root div, do your JS stuff and finally set "display:block" on that div when you're ready to expose the content. Voila?
假设您已经在 body 上使用 onLoad 事件或使用 jQuery 就绪回调，您可以从 style="display:none;" 开始 在你的根 div 上，做你的 JS 东西，当你准备好公开内容时，最后在那个 div 上设置“display:block”。瞧？
回答by publicdinamicpi
Remove a css before rendering the page:
在渲染页面之前删除 css：
(I use this for removing a Css highlighting from a table, and WORKS!)
（我用它来从表格中删除 Css 突出显示，并且有效！）
<script type="text/javascript">
function removeHighlight(){
var elm = $("#form_show\:tbl_items tr");
elm.removeClass('ui-state-highlight');
}
$(document).ready(function(){
removeHighlight();
});
</script>
回答by Hussein
Put your code in document ready. Everything inside it will load as soon as the DOM is loaded and before the page contents are loaded
准备好将您的代码放入文档中。加载 DOM 后和加载页面内容之前，它里面的所有内容都会加载
$(function(){
your code goes here...
});
Or
或者
$(document).ready(function(){
your code goes here..
});
