Menu
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
386
You can run javascript code at any time. AFAIK it is executed at the moment the browser reaches the <script> tag where it is in. But you cannot access elements that are not loaded yet.
To execute JavaScript in a browser you have two options — either put it inside a script element anywhere inside an HTML document, or put it inside an external JavaScript file (with a . js extension) and then reference that file inside the HTML document using an empty script element with a src attribute.
DOMContentLoaded does not wait for stylesheets to load, however deferred scripts do wait for stylesheets, and DOMContentLoaded queues behind deferred scripts. Also, scripts which aren't deferred or async (e.g. <script> ) will wait for already-parsed stylesheets to load.
Approach: We can use window. location property inside the script tag to forcefully load another page in Javascript. It is a reference to a Location object that is it represents the current location of the document. We can change the URL of a window by accessing it.
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.
115
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.
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
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
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.
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
