Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery detect css background-image finish download

Tags:

jquery

css

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

#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 a css background?
Here's css using jQuery, but i cant seem to get it like the code above and detect when the download is finished

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

edit this helped out! How can I check if a background image is loaded? thank you @colin

like image 771
t q Avatar asked Nov 04 '12 18:11

t q


1 Answers

I've done this before by temporarily appending a hidden child image to the div, then setting its parent's backround image and fading in, when the child image's load event has fired. Best to delete the child image afterwards, to keep things tidy! You could just append the image anywhere, but this was a mapping application and I had to keep the images associated with their parent divs!

like image 167
evilunix Avatar answered Oct 19 '22 11:10

evilunix