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

    Messages:
    176
    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;}
    }
     
  2. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,611
    What has pre-loading images got to with "SEO"??

    "Hard" or "soft"
     
  3. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    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