Pseudo-AJAX loading with CSS

Widgets, scripts and all that fashionable stuff is great - you sign up to the service and you can start pasting their code into your pages. Voila! you have a new stat counter - or popularity counter, whatever. They’re great, but the practice of loading external javascript files outside the header of your documents isn’t one that’s too friendly on the page-display times. In a sense, it’s just like whacking a great big image onto your pages.

Luckily, there is an equally fashionable method for improving the effect that these scripts have on the page. Using a simple animated graphic such as those from ajaxload.info and some CSS Wizardary, we can idenitify areas of the page that take a while to load, style them appropriately, and sit back in smug satisfaction.

For our little demonstration, we’re going to use a page hit counter from blogskinny.com, an image from ajaxload.info, and some CSS;

.ajaxload {
background:transparent url(images/ajaxload.gif) center center no-repeat;
}

And to make the background image appear as we want it, we need to add the width and height properties of the image, with a bit of inline-css styles in a div surrounding the image.

It’s a bit difficult to see, so try a Ctrl+F5 refresh and concentrate on the image!

It’s a simple idea, and one I’ll be using in my upcoming redesign of the site…