change background image, when big size umage loads

i have a div element, with very big size background image. so, is it possible, 开发者_JAVA技巧to set a little size image as backgrount, untill the big size image loads.

thanks

I guess you could put another div element underneath it (using the z-index property) and give that the faster loading background image.

Whether that is practical to do, depends on your Layout, you'd have to give more information about that.

There's also the ages-old lowsrc HTML 4 property that still seems to be pretty well supported (I have not tried it myself since Netscape 4), but that won't work for background images.

CSS:

.that-div {
    background-image:url(/path/to/small-image.png);
}

jQuery:

$(function () {
    var bigImg = new Image(),
        bigImgSrc = '/path/to/big-image.png';

    bigImg.src = bigImgSrc;

    $(bigImg).load(function(){
        $('.that-div').css('background-image':'url('+bigImgSrc+')');
    });
});