How to verify background (css) image was loaded?

Question

I have the following CSS class

.bg {
   background-image: url('bg.jpg');
   display: none;
}

that I'm applying on a TD tag.

My question is how can I tell with JavaScript/jQuery that the background image finished loading?

Thank you.

UPDATE: added display property. Since my main objective it toggle it into view.

Answer 1

Give the class to a div with visibility:hidden at the initial page load. That way, it'll already be in the browser cache when you assign the class to your table cell.

Answer 2

The only way I know of to do this is to load the image using Javascript, and then set that image as the backgroud.

For example:

var bgImg = new Image();
bgImg.onload = function(){
   myDiv.style.backgroundImage = 'url(' + bgImg.src + ')';
};
bgImg.src = imageLocation;

Answer 3

This article may help you

Basically select the background-image and do the check to see it's loaded.

Answer 4

@Jamie Dixon - he didn't say he wanted to do anything with the background image, just know when it's loaded...

$(function( )
{
    var a = new Image;
    a.onload = function( ){ /* do whatever */ };
    a.src = $( 'body' ).css( 'background-image' );
});

Answer 5

ok now if i want to resize the image and then set it as my background....i.e., after loading it will resize the image as per bowser size and then set it as bachground....

<SCRIPT language=JavaScript>

function stretchBG() {

//get background image
var bgImg = new Image();
//change line below to be relative path to your background image
bgImg.src = "/Bliss.bmp";

//set image to have same dimensions as current window
var imgX = self.outerwidth;
var imgY = self.outerheight;
bgImg.width = imgX;

bgImg.height = imgY;

//assign image to background of page

document.body.style.backgroundImage = 'url(' + bgImg.src + ')';
document.body.style.backgroundRepeat = "no-repeat";


}