I have a web application provided by another company with semi-limited customization available through CSS, and inclusion of HTML content at the end of the <head> and at the start and end of the <body>.
I need more customization than CSS alone provides, and so (right before </body>) I inject jQuery and a <script> tag to massage the crap out of the HTML they supply. (Adding, reparenting, and removing various HTML elements and content on the page.)
Unfortunately this approach means that at times users can see the original (CSS-styled) page content appear momentarily before flashing as the page restructures itself.
I’m not waiting for the load or document.ready events before making these changes, but manipulating the DOM directly the moment all elements have been added.
How can I avoid seeing the pre-munged content while the page is loading?
My current plan is to add CSS that hides any content that is destined to be moved, use JS to set a class on the <body> as soon as it loads to enable this CSS rule, and then remove the class/CSS rule after the DOM munging is complete. I’m not sure if this is a hack, however; is there a cleaner solution available?
Add something like this to the top of the body?
And then hide/remove this div when the other JS has run or when the DOM is ready