Show Loading Bar or animated GIF while CSS and JS files are loading?

Question

Hi all,

I've seen this question asked in pieces (just JS or just CSS) on other sites and SO, but I haven't seen a good solid way to do this yet.

My situation is fairly common. I'm using .NET MVC and developing in Visual Studio. I have a Site.Master page and multiple views, each with a content placeholder where I specify my JS and CSS files, like this:

<asp:Content ID="headerContent" ContentPlaceHolderID="HeaderContent" runat="server">
    <link href="../../CSS/example.css" rel="stylesheet" type="text/css" />
    <script src="../../JS/jquery/jQueryFile.js" type="text/javascript"></script>
    <!-- More files here -->
</asp:Content>

And my navigation bar is a sprite image, similar to the one seen on Apple's website. I have site sections with headers, also similar to Apple's, that are images. So my site isn't extremely image-heavy, but especially when I view in IE (but also Firefox, to some extent), the site sort of pieces itself together before my eyes, while it loads the images and jQuery files for plugins (datatables plugin always takes a second to apply to my tables).

I'd rather not show the page at all until all images, CSS, and JS files have loaded. A nice progress bar, or even an animated GIF would suffice to show before I show them the final site, all loaded. I think Gmail's loading bar uses this same idea.

Are there any suggestions on how best to achieve this? Thanks very much.

Answer 1

Try this: http://bytes.com/topic/javascript/answers/512734-how-make-progress-bar-while-browser-loading-page

Answer 2

I've not tried this out yet, give it a cautious try. Inside $(document).ready, create an overlay that displays a loading icon, like an animated circle sorta thing. I'll assume you'll name it #overlay.

Then, outside of $(document).ready, try this

$(window).load(function(){
  $("#overlay").hide();
});

$(window).load means everything is ready: http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/