CSS-Only Image Preloader.. Worth a Damn?

helloworld

New Member
ok,
so I've been using a simple jquery image preloader for rollover images for a very long time now. Always sparingly, and more recently only for tiny icon rollovers, and the occasional gradient for certain elements.. (yes, i still prefer to use image gradients in some cases.. css3 is NOT friendly with much older browsers)

I've now found a simple css-only method, and was wondering what you guys think? Does this hard SEO since you're technically loading images twice if it's present on that page?

----

basically it goes something like this, pls pardon my shorthand:
<style contents:
#preloader {
position: absolute;
left: -9999px;
top: -9999px;}

#preloader img {
display: block;
}
</style>

<? include preloader.php contents:
<div id=preloader>
<img src=img1.jpg>
<img src=img2.png>
<img src=animatedfoo.gif>
</div>

and for good measure:
@media print {
#preloader, #preloader img {
visibility: hidden;
display: none;}
}
 

ronaldroe

Super Moderator
Staff member
I don't see what it has to do with SEO either, but I would actually prefer this method, though I'd probably just go with height:0; width:0; overflow:hidden;
 
Top