I have a web app that is heavily loaded in javascript and css. First time users log in it takes some time to load once it is downloading js etc. Then the caching will make everything faster.
I want my users to be aware of this loading time. How can I add some code to "show" some loading information while js and css are downloaded?
Sweet mother of mercy, Ricardo, how much Javascript and CSS are involved with this application?
You could, I guess, do something where you load the JS and CSS using an AJAX request and do nothing with them. This will load your JS and CSS files into the cache. You could do all of this on a "Loading" page, and redirect to the real page once you've loaded the files. But IMO you really shouldn't have to do this. Use Fiddler to really see what's going on behind the scenes -- make sure people are really having to wait for their JS/CSS files to come down before doing this optimization.
It seems strange to me that the loading time depends by the size of javascript and css. Are you sure that there are no other factors causing a long loading time?
You could show an overlay saying "loading..." and hide this the moment the downloads are complete.
<html>
<head>
... a bunch of CSS and JS files ...
<script type="text/javascript" src="clear-load.js"></script>
</head>
<body>
<div
style="position: absolute; left: 50px; right: 50px; top: 50px; bottom: 50px; border: 3px solid black;"
id="loading-div"
>
This page is loading! Be patient!
</div>
... Your body content ...
</body>
</html>
Contents of clear-load.js:
document.getElementById('loading-div').style.display = 'none';
Of course, you could also tack the javascript code that hides the div at the bottom of the last javascript file that's loaded.
Also, try to pack your javascript and css files into one file and apply gzip compression or "minify" to them. You can bring 500KB of javascript in 20 requests to 1 request of less than 100KB if you do it right.
Please do yourself a favor and try YSlow, available at http://developer.yahoo.com/yslow. It's a Firebug plugin (yes, a plugin for a plugin) that will analyze your site and recommend strategies for fixing it.