CODEWITHSUNDEEP
jqueryhtmlcsscss-transitions
designerNProgrammer
designerNProgrammer

Reputation: 2701

Fade In a Div with background image after loading

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.

Upvotes: 6

Views: 10898

Answers (4)

Mahmoude Elghandour
Mahmoude Elghandour

Reputation: 2931

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

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

Upvotes: 3

Blundering Philosopher
Blundering Philosopher

Reputation: 6805

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!

Upvotes: 2

Kraken
Kraken

Reputation: 5860

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

Here is the CSS demo of the animation.

Upvotes: 0

midstack
midstack

Reputation: 2123

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 that the error message (for example: background-image:url(hERRRttp://lorempixel.com/1920/1920/);)

Upvotes: -1

Related Questions