change background image, when big size umage loads

Question

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

thanks

Answer 1

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.

Answer 2

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+')');
    });
});