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.

http://stackoverflow.com/questions/6285809/how-can-i-tell-when-a-css-background-image-has-loaded-is-an-event-fired — Arun P Johny, Feb 23 '14 at 06:57
there is no way AFAIK to detect when the background image loaded.. so the solution there is to make use of another load event technique — Arun P Johny, Feb 23 '14 at 07:13

score 3 · Answer 1 · edited Jan 29 '15 at 18:37

3

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

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

edited Jan 29 '15 at 18:37

joelmdev

11,083
10
65
89

answered Feb 23 '14 at 07:40

Mahmoude Elghandour

2,921
1
22
27

I was talking about the background image on div. – designerNProgrammer Feb 23 '14 at 07:46
3

That code won't care about background images. You need to read the project's documentation closer. – alex Mar 18 '14 at 05:47
1

@alex set waitForAll: true and background images will be included. Answer edited. – joelmdev Jan 29 '15 at 18:38
waitForImages is great – Benjamin Intal Mar 31 '15 at 16:28

score 2 · Answer 2 · edited May 23 '17 at 11:54

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!

edited May 23 '17 at 11:54

Community

1
1

answered Feb 23 '14 at 07:20

Blundering Philosopher

6,245
2
43
59

hey buddy i need it to fade in after image has been loaded.thanks. – designerNProgrammer Feb 23 '14 at 07:27
@designerNProgrammer Good call. I updated my answer to be closer to what you're looking for. – Blundering Philosopher Feb 23 '14 at 07:51
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: http://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 Mar 25 '14 at 17:52
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 :) – Martijn Mar 25 '14 at 17:55

score 0 · Answer 3 · answered Mar 25 '14 at 17:47

0

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

Here is the CSS demo of the animation.

answered Mar 25 '14 at 17:47

Kraken

5,043
3
25
46

midstack · Answer 4 · 2014-02-23T10:41:45.270

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/);)

@Martijn I dont know, no special reason :) – midstack Mar 26 '14 at 07:58 — midstack, Mar 26 '14 at 07:58

Fade In a Div with background image after loading

4 Answers4