I ran into a problem on my website recently with slow loading images. The images weren't actually very large, the reason they were slow loading was because I was using ASP.NET to dynamically create thumbnails for my images off of a larger source image. I guess I'm just too lazy to resize 75+ images in photoshop and I'm very clean when it comes to throwing more files on my webserver. My solution was to have one file and just resize it with ASP.NET. That worked great but some pages had 20 or so images and could take up to 20 seconds to load them all. I started searching for solutions to this problem with JavaScript but for the most part I dislike JavaScript and I was looking for something better than "if (document.browser.support.some.random.method)". I found my salvation in CSS once again.
Apply Ajax Style Loading Image To Your Images Without JavaScript
It's really simple, in fact it's too simple I don't know why I hadn't thought of it before. Simply add the .loading class to any of your IMG elements.
.loading { background: url(loading.gif) no-repeat center center; }
But wait, that's not all
I would also recommend adding dimensions to your images via the Height and Width properties in CSS. This will ensure that your loading.gif file appears completely. My images we're dynamically added to the page via an ASP loop so this was easy enough to add.
height: 125px;
width: 150px;
Alt Text?
The only drawback to this solution is in FireFox (and possibly other browsers, other than IE) the alt text will cover up the background-image. A workaround might be to give the IMG tag a title attribute instead of an ALT attribute. I know this isn't ideal but it's the best I can think of. Since my images didn't need any SEO treatment I was fine with this.
To view a demo of this view my wallpapers section of my site.
