How to verify background (css) image was loaded?
@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' );
});
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;
This article may help you. Relevant section:
// Once the document is loaded, check to see if the
// image has loaded.
$(
function(){
var jImg = $( "img:first" );
// Alert the image "complete" flag using the
// attr() method as well as the DOM property.
alert(
"attr(): " +
jImg.attr( "complete" ) + "\n\n" +
".complete: " +
jImg[ 0 ].complete + "\n\n" +
"getAttribute(): " +
jImg[ 0 ].getAttribute( "complete" )
);
}
);
Basically select the background-image and do the check to see it's loaded.
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.