Fade In Div With Background Image After Download

Question

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

I tried this on images on a page load, but how can we achieve this effect using background images in a div .

Answer 1

You can use the jQuery plugin called waitForImages , which can detect when background images are loaded.

 $('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 in which you load the background image into the image tag, and then when it's ready you enter the image in a div. Here is an example similar, but 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 a live preview here: Fiddle .

Hope it will be better for you!

Answer 3

HTML5 Animation will load a canvas context that allows this and more .

Here 's a demo of CSS animations.

Answer 4

Can you try this?

HTML

 <div id="mg" style="background-image:url(http://lorempixel.com/1920/1920/); display:none; width:1920px; height:1920px;"></div> 

Js

 var elem = $('#mg'), bgImg = elem.css('background-image'), imgUrl = bgImg.indexOf('"')!=-1 ? bgImg.replace('url("','').replace('")','') : bgImg.replace('url(','').replace(')',''), nwImg = new Image(); nwImg.src = imgUrl; nwImg.onload = function() { elem.fadeIn('fast'); } nwImg.onerror = function() { alert('error'); } 

Jsfiddle

http://jsfiddle.net/EZg36/8/

If you change the URL incorrectly, you will see an error message (for example: background-image: url (hERRRttp: //lorempixel.com/1920/1920/);)