在渲染页面之前加载javascript？

Question

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

Answer 1

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

这很容易做到；这很有趣，因为很多时候，人们都在尝试反其道而行之。

当浏览器遇到script 标记时，除非您使用一些特殊属性（以及支持它们的浏览器），否则页面的所有处理都会突然停止，并且浏览器会将脚本交给 JavaScript 引擎。只有当脚本完成时，页面的处理才会继续。

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

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

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

Answer 2

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

有多种方法可以实现这一结果。以下是一些在易用性和性能方面的排序。

1. 全局 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

2. 带有 div 层的封面页
   使用位于页面顶部的 div 隐藏内容，稍后将其删除。

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

   Demo

3. JavaScript sn-p
   在页面呈现之前隐藏body：
   

   <body onload="document.body.style.display='none';">
   

   Demo

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

但我不建议这样做，它在页面顶部运行 jQuery 脚本，因为这会增加额外的负担，甚至会延迟进一步的页面渲染。

Answer 3

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

Answer 4

在渲染页面之前移除一个css：

（我用它来从表格中删除 Css 突出显示，并且工作！）

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