CSS-Only Image Preloader.. Worth a Damn?

Discussion in 'Web Design' started by helloworld, Aug 1, 2014.

to remove all ads.
  1. helloworld

    helloworld New Member

    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;

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

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

    chrishirst Well-Known Member Staff Member

    What has pre-loading images got to with "SEO"??

    "Hard" or "soft"
  3. ronaldroe

    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;

Share This Page