Question

When javascript creates the parent div that all of my output is contained in, I am hiding it with element.style.display = 'none'. For performance purposes, I think having my plugin (javascript) load the css file at the beginning is the fastest way. Then the css will make the parent div visible again once it loads. However, if the css file loads before the div is created, wouldn’t javascript still hide it when it gets to that point in the code? Using an !important tag here would seem cheap. Alternatively, loading the css file after creating the div would just mean the output would take longer to be displayed to the user. I’m wondering if there is a standard solution to this, but haven’t been able to find one. Thanks!

Answer 1

<style>
   body { display: none; }
</style>
<script>
   window.onload = function(){ document.body.style.display = null; }
</script>

You might check whether the CSS link ref is loaded, that’s higher level, but I recommend the JavaScript book by David Flanagan.

Better way is to use pure CSS – it happens automatically and doesn’t wait for document load.

<style>
   body { display: none; }
</style>
<link rel="stylesheet" href="some.css">

In some.css file:

body { display: inherit; }

Not sure about inherit, maybe block will work. Try.