As soon as body DOM node is available, I'd like to add a class to it with JavaScript.
I want this to happen as soon as possible, before any of body's children are loaded.
Right now, I'm using an inline script right after opening body tag. Is there a less obtrusive way?
As soon as body DOM node is available, I'd like to add a class to it with JavaScript.
I want this to happen as soon as possible, before any of body's children are loaded.
Right now, I'm using an inline script right after opening body tag. Is there a less obtrusive way?
- body.onload = function () { ... } ? – vdegenne Commented Feb 28, 2012 at 18:53
- Does body.onload event wait for the children to be loaded too? – supertopi Commented Feb 28, 2012 at 18:55
- Why would you want to do that? – qwertymk Commented Feb 28, 2012 at 18:55
-
1
@Xander: You can append
<style>body { display: none; }</style>withjsthen. Is that the only possible reason for this? – qwertymk Commented Feb 28, 2012 at 18:59 -
1
@qwertymk: A page has several tabs that depend on
location.hash. By readinglocation.hashin the very beginning and setting corresponding styles, I'm able to instantly show only current tab elements. – Dan Abramov Commented Feb 28, 2012 at 18:59
2 Answers
Reset to default 6Might be a bit late to the party but...
You can just tap into the browser rendering cycle. Thus you don't have to deal with timeouts which leak memory (if improperly used).
var script = document.createElement('script');
script.src = '//localhost:4000/app.js';
(function appendScript() {
if (document.body) return document.body.appendChild(script);
window.requestAnimationFrame(appendScript);
})();
I would imagine this will differ between browsers.
One solution may be to test for it by placing a script immediately inside the opening <body> tag, then running your code at an interval to add the class.
<body>
<script>
function add_class() {
if(document.body)
document.body.className = 'some_class';
else
setTimeout(add_class, 10); // keep trying until body is available
}
add_class();
</script>
<!-- rest of your elements-->
</body>
jQuery does something similar internally to deal with a particular IE bug.
There isn't a guarantee that the descendant elements won't be loaded though, since again it will depend on when the particular implementation makes the body available.
Here's the source where jQuery takes a similar approach, testing for the existence of the body in its main jQuery.ready handler, and repeatedly invoking jQuery.ready via setTimeout if the body isn't available.
And here's an example to see if your browser can see the <body> element in a script at the top of the element, before the other elements. (Open your console)
Here's the same example without needing the console.