Show the background-image when the image itself is ready

Question

Basically I let the webpage load everything, but since the image is huge, I rather not show it while the browser is still downloading it.

Instead, I want to show this background (with a fading effect) when the browser finishes downloading the image.

The thing is, that the background-image must be set inside the body tag, so I don't want to apply jQuery by using $('body').hide; or $('body').show; because it hides practically the entire webpage.

I've been searching this feature but I only found cases when people wanted to show/hide them in another tag (instead of the all-wrapping one (body in my case)).

Is it possible or I'm just reaching Mars itself? Thanks for your help!

I think you will not be able to get the fading effect. At least the solutions that are currently below won't give you that. If it's really a must, you may consider putting a huge `div` underneath all of the document's contents and fade it in when the document is loaded. After fade-in, you can set the body background and remove the `div`, but it's an ugly solution and I'm not sure I'd like visiting a page that behaves like that. — Vedran Šego, May 19 '13 at 18:10
Try 1) http://stackoverflow.com/a/5058336/1069633 2) http://stackoverflow.com/questions/5210028/jquery-delay-until-background-image-is-loaded-then-faded-in — Saurabh Ande, May 19 '13 at 18:17

score 0 · Answer 1 · answered May 19 '13 at 18:07

0

Just set the body background-image property after the page has been loaded like so:

jQuery('body').css('background-image', 'url(path/to/some/image.jpg)');

See it here: http://jsfiddle.net/duffmaster33/Z9pEg/

answered May 19 '13 at 18:07

Duffmaster33

1,160
9
16

Very nice example background. :-) – Vedran Šego May 19 '13 at 18:11

Dory Zidon · Answer 2 · 2013-05-19T18:12:31.790

0

I suggest you do the following:

Download the image separate to the document.
Then load the Image in JavaScript

Setting it to the background only once the download was complete (it will be cached so you can just point the src of the image and it will work)

var img = new Image();
img.onload = function() { .$('body').css('background-image', 'url(' + http://path/to/image.jpg +  ')'); }
img.src = "http://path/to/image.jpg";

Optional: run everything only once the document load was complete (wrap the function body with:

function () { $(ready) { function() { .$('body').css('background-image',                  'url(' +     http://path/to/image.jpg +  ')'); }  }

edited May 19 '13 at 18:12

answered May 19 '13 at 18:07

Dory Zidon

10,497
2
25
39

About the first step, is it possible to let the webpage download it by making a separate `img` tag with the path to the image I desire and remain it `display:none`? or there's a code for that? (I'm not used to js/jquery) – Fabián May 19 '13 at 18:25
that's what my code does, it downloads an image from that link and doesn't show it on the page. You can also add a hidden but then you need to connect a onload to it, to call Javascript once it's loaded. So my example is simpler. – Dory Zidon May 19 '13 at 18:26

score 0 · Answer 3 · answered May 19 '13 at 18:07

You have to create 2 CSS classes. bodyloading and bodyloaded. The first one is the default class name of the body tag. After the page is loaded you can change the body tags class name to bodyloaded

document.body.className = "bodyloaded";

So the second css will be displayed (that will contain the background image).

score 0 · Answer 4 · answered May 19 '13 at 18:07

0

If you use $('body').hide you hide the whole element not just the background image, i.e. nothing will be shown. Just set the background image using css modifaction

$('body').css("background-image", "url(picture.jpg)");

answered May 19 '13 at 18:07

dirkk

6,160
5
33
51

Show the background-image when the image itself is ready

4 Answers4