better loading sequence?

Question

I've got a sidebar with lots of functionality in it. It works great, but now I've got a module on it that takes a bit to load (it's using file_get_contents() for 3 requests, though they are cached). It takes a minute, so the site looks broken for a minute.

I presume this is because it goes like this

<aside class="sidebar">
    <div class="module one">Stuff</div>
    <div class="module two">Stuff</div>
    <div class="module three">Stuff</div>
    <div class="module four">Stuff</div>
    <div class="OMG I TAKE A SECOND TO LOAD">FOOBAR</div>
</aside>

I presume it gets stuck parsing the last div, thus doesn't actually close the sidebar yet.

My question is is there a "good" (preferably javascriptless) way to load all the sidebar, and close it, before the long loading div loads?

Answer 1

"javascriptless" will be the problem here. If you want a full-page sent to the user quickly, and then asynchronous loading of some of the "heavier" components on that page, your best bet is ajax. In fact, it is advisable to do this somewhat prolifically for all components of a page which have external dependencies and are not the primary subject of the user's page visit.

This may take a little work, but modern js libraries can do all of the client-side heavy lifting. You just need to make distinct URLs for each of these sidebar divs (or at least the ones which will be asynchronously loaded).

You are doing good thinking, this is good architecture (don't make the user wait for stuff in a sidebar!).