Site loading
I have a web app that loads heavily in javascript and css. The first time you login, it takes some time to load after loading js, etc. Then caching will make everything faster.
I want my users to be aware of this load time. How do I add code to "display" some loading information when the js and css are loaded?
source to share
You can show an overlay that says "loading ..." and hide it when the download is 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>
Clear-load.js content:
document.getElementById('loading-div').style.display = 'none';
You can of course also use javascript code that hides the div at the bottom of the last loaded javascript file.
Alternatively, try packing your javascript and css files into one file and apply gzip or "minify" compression to them. You can fetch 500KB of javascript in 20 requests to 1 request under 100KB if you do it right.
source to share
Sweet mother of mercy, Ricardo, how much Javascript and CSS is involved in this application?
You could, I suppose, do something where you load the JS and CSS with an AJAX request and do nothing with them. This will load your JS and CSS files into the cache. You can do all this on the Upload page and redirect to the real page after uploading the files. But IMO you don't really need to do this. Use Fiddler to really see what's going on behind the scenes - make sure people really need to wait for their JS / CSS files to be there before doing this optimization.
source to share
Please do yourself a favor and give YSlow a try, available at http://developer.yahoo.com/yslow . This is a Firebug plugin (yes, a plugin for a plugin) that will analyze your site and recommend strategies for fixing it.
source to share