Carsblog

Monday, 25th of May, 2009 2:07 am UTC

Merrily we roll along

After it got too dark to draw tonight, I turned on the computer and added a "loader" animation to the wallpaper. Some of the larger files can be over 100 or 200k, which will still take a moment of annoying load time for dialup users. Now, a little rotating dealie pops up in the corner, then disappears when the wallpaper file is finished loading. Nifty!

Turns out it's fairly simple to do with CSS and JavaScript. Open the loader image over the wallpaper, then within the wallpaper image tag add this script:

onload="loader.style.display = 'none';"

When the wallpaper image finishes loading, the loader graphic--with the ID "loader"--vanishes into the ether. More details? First, be sure to load the loader animation early, invisibly.

<img src="files/loader.gif" style="width:0; height:0; border:0;">

Then, display it for real, and give it absolute positioning within the same section as the bigger graphic.

<div>
<img id="loader" src="files/loader.gif" style="position:absolute;">
<img onload="loader.style.display = 'none';" src="files/glee.jpg" />
</div>

I imagine any small animated GIF would do. A little clock, an hourglass, an impatient sprite, etc.