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. User Avatar
    Tony
    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

    • User Avatar
      Josh L
      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. User Avatar
    Home Design Mild
    Permalink to comment#

    Im dont undersantd

  3. User Avatar
    Aaron
    Permalink to comment#

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

  4. User Avatar
    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. User Avatar
    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. User Avatar
    Auz
    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. User Avatar
    Pepe.pro
    Permalink to comment#

    Technique #2, intelligent!

  8. User Avatar
    Jan
    Permalink to comment#

    Thanks cnwtx, your solution worked perfectly for me.

  9. User Avatar
    Erick
    Permalink to comment#

    Im dont undersantd!

  10. User Avatar
    Diseño Web
    Permalink to comment#

    Good solution thanks!

  11. User Avatar
    21paradox

    based on solutions above.

    &:before{
         content: '';
         background: url(../img/navHomeSel@2x.png), url(../img/navNewsSel@2x.png), url(../img/navOrderSel@2x.png),url(../img/navServiceSel@2x.png),url(../img/navPersonalSel@2x.png);
         width:0;height:0;visibility:hidden;
    }
    
    

    Many browsers support Multiple Backgrounds now.

    http://caniuse.com/#search=Multiple%20Backgrounds

  12. User Avatar
    Great solutions! But wont work for me...

    Love these solutions. I’ll definitely try them out sometime. But for my issue I am still at a loss. How would you do it on this page? My rollover is using two background images.

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

Submit a Comment

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag