JQuery detect css background-image finish download

Question

I am trying to upload an image and then apply fade using css background-image .
I can accomplish this when it is a regular <img src=''/> as follows:

 #mainImg {display:none} var c = $('#mainImg'); $(new Image()).load(function(){ c.fadeIn(300); }).attr('src', c.attr('src')); 

But how can I detect it when it is css background ?
Here's the css using jQuery, but I can't get it, like the code above, and determine when the download is complete.

 $('<img/>').attr('src', 'image.png').load(function() { $('#mainImg').css('background-image', 'url(image.png)'); }); 

change , it helped! How to check if background image is loaded? thanks @colin

Answer 1

I did this earlier by temporarily adding a hidden child image to the div, and then set its parent inverse image and faded out when a child image load event occurred. It’s best to remove the child image to keep things in order. You can just add the image anywhere, but it was a mapping application, and I had to save the images associated with their parent divs!