Question

我想在我的页面加载之前运行一些jquery代码。我添加了一些使用javascript更改css的类，当页面加载时，我会在短时间内看到“旧”css。有任何想法吗？感谢

Answer 1

我想在我的页面加载之前运行一些jquery代码。

这很容易做到;这很有趣，因为很多时候，人们都试图以相反的方式去做。

当浏览器遇到script标记时，禁止使用一些特殊属性（以及支持它们的浏览器），页面的所有处理都会暂停，浏览器会将脚本移到JavaScript发动机。只有在脚本完成后才会继续处理页面。

因此，如果页面的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>

请注意，上面的some_condition只能依赖并引用文档中上面的项目（因为浏览器尚未对文档的其余部分做任何事情，因为它正在等待看看脚本将要输出的document.write内容。

Live example（刷新几次，一半是红色，一半是蓝色）。它不使用jQuery，但你明白了。

Answer 2

假设您已在主体上使用onLoad事件或使用jQuery ready回调，您可以从style =“display：none;”开始。在你的根div上，做你的JS东西，最后在你准备公开内容时在那个div上设置“display：block”。瞧？

Answer 3

基本上它与实现加载器/微调器的问题类似。您向用户显示动画gif，当页面最终加载时，您将其删除。
在这种情况下，我们不是显示gif，而是显示空白。

有多种方法可以完成此结果。在易用性和性能方面，有几个订购。

全局CSS规则。
隐藏全局CSS文件中的body。

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

Demo

包含div图层的封面
使用位于页面顶部的div隐藏内容，稍后将其删除。

div#page_loader {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   background-color: white;
   z-index: 100;
}

Demo

JavaScript代码段
在页面呈现之前隐藏body：
```
<body onload="document.body.style.display='none';">
```
Demo

如果您使用Modernizr，您还可以利用其CSS类隐藏/显示内容，具体取决于用户的设备或浏览器。

我不推荐的是，它在页面顶部运行jQuery脚本会导致额外的负担增加，甚至会延迟页面渲染

Answer 4

在渲染页面之前删除css：

（我使用它来从表中删除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

准备好您的代码。在加载DOM之后和加载页面内容之前，其中的所有内容都将加载

$(function(){
 your code goes here...
});

或

$(document).ready(function(){
 your code goes here..
});

在渲染页面之前加载javascript？

5 个答案: