Pseudo-AJAX loading with CSS
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.
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…