Grow your CSS skills. Land your dream job.

Last updated on:

CSS Only Image Preloading

One big reason to use image preloading is if you want to use an image for the background-image of an element on a mouseOver or :hover event. If you only apply that background-image in the CSS for the :hover state, that image will not load until the first :hover event and thus there will be a short annoying delay between the mouse going over that area and the image actually showing up.

Technique #1

Load the image on the element's regular state, only shift it away with background position. Then move the background position to display it on hover.

#grass { background: url(images/grass.png) no-repeat -9999px -9999px; }
#grass:hover { background-position: bottom left; }

Technique #2

If the element in question already has a background-image applied and you need to change that image, the above won't work. Typically you would go for a sprite here (a combined background image) and just shift the background position. But if that isn't possible, try this. Apply the background image to another page element that is already in use, but doesn't have a background image.

#random-unsuspecting-element { background: url(images/grass.png) no-repeat -9999px -9999px; }
#grass:hover { background: url(images/grass.png) no-repeat; }

The idea create new page elements to use for this preloading technique may pop into your head, like #preload-001, #preload-002, but that's rather against the spirit of web standards. Hence the using of page elements that already exist on your page.

I had the idea to try to and use the same element, only use the :after pseduo-class to load the image, so you didn't need to rely on there being enough extraneous background-free images on your page to work with, but for whatever reason didn't want to preload them properly.

More

Check this article out for some more techniques, including JavaScript.

Comments

  1. Permalink to comment#

    Interesting tips above. I used to use javascript for this but CSS preloads are easier to implement and fully browser compatible.

    A different way to pre-load images with CSS can be found here http://www.prismgraphicdesign.co.uk/blog/?p=12

    • Permalink to comment#

      Tony, your technique will not work in any modern browsers. Both inline and background images do not load when applied to elements whose display property is “none”.

  2. Im dont undersantd

  3. Aaron
    Permalink to comment#

    This worked like a charm for me. Thanks for the great idea.

  4. Fred
    Permalink to comment#

    Aaand, in cnwtx example, if we use “display:none;” instead of “visibility:hidden;”… will the image cache as well anyway?:

    #something:before
     {content: url("./img.jpg");
                     width:0;
                     height:0;
                     display:none;}
    

    Thanks in advance.

  5. Anonymous
    Permalink to comment#

    I can’t paste this method here in the comments, but here is an excellent method I found:

    http://www.netmechanic.com/news/vol6/css_no18.htm

  6. Permalink to comment#

    What if you were to create one div? Then give it multiple backgrounds.

    .bg-preloader-div{
        background: url(/images/button-criminal-defense-hover.png) no-repeat;
        background: url(/images/button-dui-hover.png) no-repeat;
        background: url(/images/button.png) no-repeat;
        width:0;
        height:0;
        display:none;
    }
    
  7. Permalink to comment#

    Technique #2, intelligent!

  8. Jan
    Permalink to comment#

    Thanks cnwtx, your solution worked perfectly for me.

  9. Erick
    Permalink to comment#

    Im dont undersantd!

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".