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;}
}
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;}
}