If there’s no way around a few large images in your design, but you don’t want the page to load piecemeal, here’s a way to cover them up while they’re loading, with a familiar looking “flash” style curtain. Basically, what this does is use Javascript to cover the page with a styled DIV (the curtain) that covers the loading page elements. Once the page is loaded, Javascript then fades the covering layer to reveal the fully loaded page.
The curtain contains two things: a solid background color and an animated non-repeating gif which gives it the preloader look. Because Javascript is used to both close and open the curtain, without Javascript enabled or available it’s bypassed entirely letting it degrade gracefully.
To try this out, first include the following onload code in your page’s BODY element:
<body onload=’openTheCurtain()’>
Then, immediately after the BODY element in your HTML paste the following code. You can change the background color and the image if you like.
<div id=’CURTAIN’ style=’height: 0px; width: 0px; position: absolute; top: 0; left: 0; z-index:999;’></div>
<script type=’text/javascript’>
// CLOSE THE CURTAIN WHILE THE PAGE IS BEING LOADED
var curtains = document.getElementById(‘CURTAIN’);
changeOpacity(’100′);
curtains.style.width = “100%”;
curtains.style.height = “100%”;
curtains.style.background = “#2d1c15 url(‘loader.gif’) no-repeat 49% 250px”;function changeOpacity(level) {
curtains.style.opacity = level;
curtains.style.MozOpacity = level;
curtains.style.KhtmlOpacity = level;
curtains.style.filter = “alpha(opacity=”+(level*100)+”);”;
if(level<.05) curtains.style.display = “none”;
}function openTheCurtain() {
for (i=0; i<=1; i+=(1/20)) setTimeout(“changeOpacity(“+(1-i)+”)”,i*1000);
}</script>
If you’d like, you can see a working example at webmaestro.biz/curtain.
Of course, this doesn’t mean you shouldn’t still try to keep image sizes down. No matter how cool your animated “loading” image is, people won’t wait forever. If you need some help creating an animated image, check out www.ajaxload.info.
