CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Phrogz
Phrogz

Reputation: 303244

Delaying the initial rendering of a web page

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?

Upvotes: 3

Views: 2227

Answers (3)

Phrogz
Phrogz

Reputation: 303244

My final solution was:

  1. Add this code right after the start of <body>:

    <script type="text/javascript">
  document.body.className += ' loading';
</script>

  2. Use CSS to hide any pieces that were going to be moved or removed:

    body.loading #navigation,
body.loading ol.extra-links {
  display:none !important
}

  3. Remove the loading class at the very end, after all DOM manipulation:

      <!-- include jQuery for transformation work -->
  <script type="text/javascript">
    // all transformations
    $(document.body).removeClass('loading');
  </script>
</body>

The benefit of this approach is that the user does not see a blank white screen during loading; the content that doesn't get removed or moved (some CSS headers) are visible, and may shift slightly in some cases as additional content shows up around them.

Upvotes: 1

472084
472084

Reputation: 17885

Add something like this to the top of the body?

<div style="z-index:10000; background-color:#FFF; position:fixed; top:0; left:0; width:100%; height:100%;"></div>

And then hide/remove this div when the other JS has run or when the DOM is ready

Upvotes: 2

ltjfansite
ltjfansite

Reputation: 460

http://gayadesign.com/scripts/queryLoader2/

Something like that?

just to clarify i didn't write that script.

Upvotes: 1

Related Questions