commadot.com

CSS Preload Images

This is an interesting technique for preloading graphics. Resources: One here. This guy originated it, but it’s pulled down now.

#preloadedImages {
       width: 0px;
       height: 0px;
       display: inline;
       background-image: url(path/to/image1.gif);
       background-image: url(path/to/image2.gif);
       background-image: url(path/to/image3.gif);
       background-image: url(path/to/image4.gif);
       background-image: url();
}

This is much easier than using JS to do it. I need to experiment with it more.

Comments

9 responses to “CSS Preload Images”

  1. Adaptiv CSS Avatar
    Adaptiv CSS

    Great solution, I assume I just put an empty div at the end of my page…

    Reply
  2. Glen Lipka Avatar
    Glen Lipka

    Yup. 🙂

    Reply
  3. alex Avatar
    alex

    this doesnt work with firefox 2, but it does with safari

    Reply
  4. xPheRe Avatar
    xPheRe

    Neither does work under Firefox 3.
    Only loads the last declared ‘background-image’ 🙁
    Nice idea, though 😉

    Reply
  5. Glen Lipka Avatar
    Glen Lipka

    Hmm, Ill have to work on a different technique.

    Reply
  6. alex Avatar
    alex

    im guessing it doesnt work cos css2* doesnt support multiple background images.

    my solution was to create a div (i think i set it’s display:none) on the page with preloaded images with width=1 height =1 (height/width=0) seems to not load the image on some browsers.

    from what i remember, it was compatible with firefox 2/3, safari 3, ie6/7

    http://www.songbirdestate.com.au

    Reply
  7. danreb Avatar
    danreb

    I encountered a situation that I need to preload not only images but including swf file that will be used in other pages of our company site, so I ended up using iframe to do it, If someone have a better solution for this please help.

    Here what I done:

    in my css here’s my code

    .preload {
    position: absolute;
    top: -9999px;
    left: -9999px;
    height: 20px;
    width: 20px;
    display:inline;
    overflow: hidden;
    }

    then at the bottom of my page before the closing body tag i insert the iframe in the div with a class preload and insert there the iframe that loads the html document consisting of all images and flash file that I need to preload and will be used in other pages of my site, here how I do it.


    <iframe src=

    Reply
  8. danreb Avatar
    danreb

    Continuation:

    <iframe src=

    Reply
  9. danreb Avatar
    danreb

    see the actual page http://www.teamquest-inc.com.ph

    it works fine in all browser i tested

    Reply

Whatya think?