preload images with css background images?

t开发者_如何学运维here is the simple well-known way of preloading images with a fixed-positioned div outside of the viewport that holds some images.

Is it actually the same to just use the background property in css and apply multiple images to a div with no content?

like so?

<div id="preload"></div>

#preload {
    position: absolute;
    overflow: hidden;
    left: -9999px; 
    top: -9999px;
    height: 1px;
    width: 1px;
    background: transparent url("../images/misc/formLoader.gif") no-repeat center center;
    background: transparent url("../images/misc/selectLoader.gif") no-repeat center center;
    background: transparent url("../images/misc/projectLoader.gif") no-repeat center center;
}

Would this actually work? Or does the last background property overwrite the other declarations?

Is it possible with CSS3 multiple backgrounds?

---

When you comma seperate the background images like so: background-image: url(../images/misc/formLoader.gif), url(../images/misc/selectLoader.gif), url(../images/misc/projectLoader.gif); It should work. I don't know, if that works with `background:´. Just try it out.

---

You can put in multiple backgrounds to one element with css3. http://www.css3.info/preview/multiple-backgrounds/

---

If you want it to work in ie as well.. you wanna do it the <img> way.

---

Also one good way is to put multiple images in single image document and apply that as a background image to separate elements and use background-position: -20px 0px; to define the position where that one specific image is located. This makes all these images in this document load in the exact same time as they are in the same document..

Using this way, you only have to load one <img> or background and yet get multiple images loaded.

---

This worked great for me in both Chrome and IE to preload the images and swap them on hover. The "preload" div has no height/width since the images are set to background, so it doesn't show on the page, and the images are ready when you want to swap them on hover. (you will obviously have to set height/width on the anchors. I'm just showing minimal CSS here to get the point across)

HTML:

<div id="preload"></div>
<div id="icons">
    <a href="http://..." class="social-button-1"></a>
    <a href="http://..." class="social-button-2"></a>
    <a href="http://..." class="social-button-3"></a>
</div>

CSS:

#preload {background: url('images/pic1b.png'), url('images/pic2b.png'), url('images/pic3b.png');}
.social-button-1 {background: url('images/pic1a.png');}
.social-button-2 {background: url('images/pic2a.png');}
.social-button-3 {background: url('images/pic3a.png');}
.social-button-1:hover {background: url('images/pic1b.png');}
.social-button-2:hover {background: url('images/pic2b.png');}
.social-button-3:hover {background: url('images/pic3b.png');}