在渲染页面之前加载javascript？

Question

I want to run some jquery code before my page have loaded. 我想在我的页面加载之前运行一些jquery代码。 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. 我添加了一些使用javascript更改css的类，当页面加载时，我会在短时间内看到“旧”css。 Any ideas? 有任何想法吗？ Thanks 谢谢

Answer 1

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 script tag, 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. 当浏览器遇到script标记时，禁止使用几个特殊属性（以及支持它们的浏览器），页面的所有处理都会暂停，浏览器会将脚本交给JavaScript引擎。 Only when the script completes does processing of the page continue. 仅在脚本完成时才继续处理页面。

So if you have a script tag in the head section of your page, you can output CSS classes via the document.write function: 因此，如果页面的head部分中有script标记，则可以通过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_condition in 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.write content 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，但你明白了。

Answer 2

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. 您向用户显示动画gif，当页面最终加载时，您将其删除。
In this case, instead of showing a gif, we show blank. 在这种情况下，我们显示空白，而不是显示gif。

There are various ways of accomplishing this result. 有多种方法可以实现这一结果。 Here are few ordered in terms of ease and performance. 在易用性和性能方面，有几个订购。

Global CSS rule . 全局CSS规则 。
Hide the body on your global CSS file. 隐藏全局CSS文件中的body 。
```
 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(); }); 
```
Demo 演示
Cover page with div layer 带有div图层的封面
Hide the content with a div sitting on top of the page and remove it later. 使用位于页面顶部的div隐藏内容，稍后将其删除。
```
 div#page_loader { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: white; z-index: 100; } 
```
Demo 演示
JavaScript snippet JavaScript代码段
Hide the body before the page renders: 在页面呈现之前隐藏body ：
```
 <body onload="document.body.style.display='none';"> 
```
Demo 演示

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 jQuery scripts at the top of the page, cause that's going to add extra burden, and delay even further page rendering. 但是我不建议这样做，它在页面顶部运行jQuery脚本，这会增加额外的负担，并延迟进一步的页面渲染。

Answer 3

Assuming you're already using the onLoad event on body or using the jQuery ready callback, you could start with style="display:none;" 假设您已在主体上使用onLoad事件或使用jQuery ready回调，则可以从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. 在你的根div上，做你的JS东西，最后在你准备公开内容时在那个div上设置“display：block”。 Voila? 瞧？

Answer 4

Remove a css before rendering the page: 在呈现页面之前删除css：

(I use this for removing a Css highlighting from a table, and WORKS!) （我使用它来从表中删除Css突出显示，并使用WORKS！）

<script type="text/javascript">

    function removeHighlight(){
        var elm = $("#form_show\\:tbl_items tr");
        elm.removeClass('ui-state-highlight');
    }

    $(document).ready(function(){
        removeHighlight();
    });

</script>

Answer 5

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..
});

在渲染页面之前加载javascript？

问题描述

5 个解决方案

解决方案1
34 已采纳 2011-04-12 22:18:51

解决方案2
5 2016-04-08 01:24:42

解决方案3
5 2011-04-12 22:15:08

解决方案4
-2 2012-03-27 06:41:00

解决方案5
-10 2011-04-12 22:15:14

在渲染页面之前加载javascript？

问题描述

5 个解决方案

解决方案1 34 已采纳 2011-04-12 22:18:51

解决方案2 5 2016-04-08 01:24:42

解决方案3 5 2011-04-12 22:15:08

解决方案4 -2 2012-03-27 06:41:00

解决方案5 -10 2011-04-12 22:15:14

解决方案1
34 已采纳 2011-04-12 22:18:51

解决方案2
5 2016-04-08 01:24:42

解决方案3
5 2011-04-12 22:15:08

解决方案4
-2 2012-03-27 06:41:00

解决方案5
-10 2011-04-12 22:15:14