在呈现页面之前加载JavaScript？

问题描述

| 我想在页面加载之前运行一些jquery代码。我添加了一些使用javascript更改CSS的类，并且在页面加载时，我在很短的时间内看到\“ old \” CSS。有任何想法吗？谢谢

解决方法

我想在页面加载之前运行一些jquery代码。这很容易做到；这很有趣，因为在很多时候，人们都在尝试相反的方法。当浏览器遇到“ 0”标记，并禁止使用几个特殊属性（以及支持它们的浏览器）时，对页面的所有处理都会停止，浏览器会将脚本交给JavaScript引擎。只有脚本完成后，页面处理才会继续。因此，如果页面的“ 2”部分中有“ 0”标记，则可以通过“ 3”功能输出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>

请注意，上面的“ 5”只能依赖并引用文档中位于其上方的项目（因为浏览器尚未对文档的其余部分执行任何操作，因为它正在等待查看“ 3”的含义）内容，脚本将要输出）。实时示例（刷新几次，一半时间刷新为红色，一半时间刷新为蓝色）。它不使用jQuery，但是您明白了。 ,假设您已经在主体上使用onLoad事件或使用jQuery ready回调，则可以在根div上以style = \“ display：none; \”开头，执行JS工作，最后设置\“ display：block当您准备公开内容时，在该div上添加\“。瞧？ ,基本上，这与实现装载程序/旋转程序类似。您向用户显示动画的gif，然后在页面完成加载时将其删除。在这种情况下，我们不显示gif，而是显示空白。有多种方法可以实现此结果。在便利性和性能方面，这里的订购很少。全局CSS规则。隐藏全局CSS文件中的ѭ7。

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\';\">

演示版如果使用Modernizr，则还可以利用其CSS类来隐藏/显示内容，具体取决于用户的设备或浏览器。但是我不建议这样做，因为它在页面顶部运行了jQuery脚本，这会增加额外的负担，甚至延迟进一步的页面渲染。 ,在呈现页面之前删除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>

,准备好将代码放入文档中。 DOM加载后以及页面内容加载之前，其中的所有内容都将加载

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

要么

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

javascript 之前之前加载加载加载呈现呈现页面页面