How to stop web content from being displayed before css/jquery is prepared?

Question

I have a kind of huge web (many images, many lines of javascript, complicated stylesheet). While the browser is loading all the content, before css/jquery is loaded, it shows the pure html data, unstyled, which doesn't really look good.

Curiously, firefox seems to be doing this the most. Other browsers seem to do it pretty fine.

How can I go around this? I thought about starting the index with some css/javascript directive which would cause the browser to not display anything (display: none?) until the content is ready (how?).

Any ideas on how to fix this problem?

If the page is indeed huge, showing the users nothing until everything is loaded may make people think there is nothing on the page. I may want to apply a loading spinner if you are going to do this. — Diodeus - James MacFarlane, Jul 27 '12 at 14:12
@Diodeus: sounds like a great idea, why don't you post an answer explaining how to do this? — Frantisek, Jul 27 '12 at 14:12
See if this is useful to you [Link](http://stackoverflow.com/questions/7028722/how-can-i-hide-a-page-contents-until-all-the-images-are-fully-loaded) — Mr. Alien, Jul 27 '12 at 14:16

score 1 · Accepted Answer · edited Jul 28 '12 at 12:05

1

I think you may want to look more carefully at why the problem is occurring, however, I can help you hack around it!

You could display none or all DOM elements using a different style sheet which loads first, then use jQuery's on load of doc to remove that style.

edited Jul 28 '12 at 12:05

Rndm

6,710
7
39
58

answered Jul 27 '12 at 14:42

TJH

214
1
3

For the ease of removing it again you might want to use #wrapper (where #wrapper is your highest level dom element) and apply display none to that. That way removing the hide with jQuery is easier. – TJH Jul 30 '12 at 07:05
I've done this in the past myself and I chose to load a small 'loading' gif in the page to display until loaded. From a UX perspective it lets the user know all is well. I simply had a master div with display none and an absolutely positioned to centre loading gif - as soon as doc was fully loaded according to jQuery I whipped the loading div out and removed display none from the master div using removeClass() – TJH Jul 30 '12 at 07:09

score 0 · Answer 2 · answered Jul 27 '12 at 14:32

0

Put all the scripts and stylesheets in the header, regardless of what people say to place JS always in the footer and then work the magic.

answered Jul 27 '12 at 14:32

Amruth Pillai

1,539
2
13
28

score 0 · Answer 3 · answered Jan 11 '21 at 20:18

In my case. I use css onload to load the html content only when css wre loaded

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">      
        function insertContentAtEnd(u, id_script_pre_html, id_script_post_html) {var xhr = new XMLHttpRequest();xhr.open('GET', u, true);xhr.onreadystatechange = function () {if (this.readyState !== 4) {return;}; if (this.status !== 200) { return; } else { var el = document.createElement('div');document.body.appendChild(el); /* to place at end of document*/ el.innerHTML = this.responseText; if(s1){ eval(document.getElementById(s1).innerHTML);}if(s2){ eval(document.getElementById(s2).innerHTML);}  }; }; xhr.send();}
    </script>
    <link rel="stylesheet" href="/inc/css/default.css" onload="insertContentAtEnd('/lay/u/l/default.html','scr_u_l_pre','scr_u_l_post');"/>

</head>
<body></body>
</html>

How to stop web content from being displayed before css/jquery is prepared?

3 Answers3