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.

Solution 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
});

Solution 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!

Comments

[designerNProgrammer]

hey buddy i need it to fade in after image has been loaded.thanks.

[designerNProgrammer]

I was talking about the background image on div.

[Blundering Philosopher]

@designerNProgrammer Good call. I updated my answer to be closer to what you're looking for.

[user3167101]

That code won't care about background images. You need to read the project's documentation closer.

[Martijn]

I suggest also placing the background url to the div. You probaly can do that when you put together the template, whilst the JS method takes some resource: jsfiddle.net/unUc8/8. I also took the liberty of removing the image after the load, minimizing the DOMsize (allthough one might argue about the CPU it takes to remove them)

[Martijn]

Updated the answer from div#id to #id. When using id's, it can use getElementById(), when you add the div, it also has to test if it is a div, and it can no longer use the fast functions :)

[midstack]

@Martijn I dont know, no special reason :)

[joelmdev]

@alex set waitForAll: true and background images will be included. Answer edited.

[Benjamin Intal]

waitForImages is great