Fade In a Div with background image after loading

Question

I am trying to fade in a div which has an inline background image in it.

I've tried it on images on page load, but how can we achieve that effect with background images in a div.

Answer 1

You Can Use a jQuery plugin called waitForImages that can detect when background images have downloaded.

$('selector').waitForImages({
    finished:function(){$(this).slideUp();},
    waitForAll:true
});

Answer 2

The second answer from the Question linked in the comments, Link here, provides a solution where you load a background-image to an image tag, then when it's ready you inject the image into a div. Here is an example similar, yet different:

html:

<img src="http://www.modernmythmedia.com/wp-content/uploads/2013/04/Iron-Man-wallpaper-2-2032-e1367196003357.jpg" id="dummy" style="display:none;" alt="" />
<div id="pic" style="height:100px;width:100px;display:none;"></div>

jQuery:

$('#dummy').ready(function() {
    $('#pic').css('background-image','url(http://www.modernmythmedia.com/wp-content/uploads/2013/04/Iron-Man-wallpaper-2-2032-e1367196003357.jpg)');
    $('#pic').fadeIn(1000);
});

With live preview here: Fiddle.

Hopefully this works better for you!