开发者

Load javascript before rendering page?

开发者_C百科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


I want to run some jquery code before my page have loaded.

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. 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:

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

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.


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.

There are various ways of accomplishing this result. Here are few ordered in terms of ease and performance.

  1. Global CSS rule.
    Hide the body on 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();
    });
    

    Demo

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

    Demo

  3. JavaScript snippet
    Hide the body before the page renders:

    <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.

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.


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?


Remove a css before rendering the page:

(I use this for removing a Css highlighting from a table, and WORKS!)

<script type="text/javascript">

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

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

</script>


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

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

Or

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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜