Only load the background-image when it has been fully loaded?

Question

Well, the title pretty much describes my question:

How to load the background-image dynamically after it has been fully loaded? Sometimes, I must use backgrounds that are so big that it can take a while for the browser to download it. I'd rather 'load it in the background' and let it fade in when it has been fully loaded.

I think jQuery would be best to be using, but I also want my background to appear if JavaScript has been disabled. If this really isn't possible, so be it, but I think it is?

Best regards, Aart

........

EDIT:

Thanks a bunch, guys! I've been bugged with this for ages and just couldn't think of a nice and easy way.

I converted Jeffrey's Javascript-solution into a jQuery one, just because jQuery's built-in fade looks so awesome.

I'll just post it here in case anyone else has the same issue:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type='text/javascript'>
    $(document).ready(function() {
        $('#img').css('opacity','0').load(function() {
            $(this).animate({
                opacity: 1
            }, 500);
        });
    });

</script>

<img src='yourimage.jpg' id='img'/>

I would suggest your best way to get this working would be to reduce the size of the background images — Manse, Apr 04 '12 at 15:01
Of course, but sometimes, this just is not possible. Especially with a slow connection, it just takes some time for some images to load, even when they are as small as possible. — Aart den Braber, Apr 04 '12 at 17:17

score 7 · Accepted Answer · edited May 08 '19 at 17:16

7

If the image is included with an img element:

<img src="bg.jpg" id="img" onload="this.style.opacity='1'">

<script>
    document.getElementById("img").style.opacity="0";
</script>

That should load the image normally if JavaScript is disabled, but show it only once it loads assuming it's enabled.

One thing to note (that I overlooked): some browsers will not even attempt to load an image if its display property is none. That's why this method uses the opacity attribute.

edited May 08 '19 at 17:16

Ed The ''Pro''

875
10
22

answered Apr 04 '12 at 15:03

Jeffrey Sweeney

5,986
5
24
32

1

Aart says that javascript might be disabled, so these won't work? – Panagiotis Apr 04 '12 at 15:04
1

Ah, I'll change my answer, hold on. – Jeffrey Sweeney Apr 04 '12 at 15:05
Thank you. The opacity-fix is just what I need! – Aart den Braber Apr 04 '12 at 17:18
1

Updated the question with my jQuery-solution. It uses fade instead of just show. :) – Aart den Braber Apr 04 '12 at 17:26

score 3 · Answer 2 · answered Apr 04 '12 at 15:02

You can't do it when JS is disabled. However, what you can do is set the background image in CSS and then use the following script (assuming the element has the ID myelem).

(function() {
    var elm = document.getElementById('myelem'),
        url = 'background image URL here';
    elm.style.backgroundImage = "none";
    var tmp = new Image();
    tmp.onload = function() {
       elm.style.backgroundImage = "url('"+url+"')";
       // or insert some other special effect code here.
    };
    tmp.src = url;
})();

EDIT: Although, make sure your background images are optimal. If they are PNG, try having them Indexed with as small a colour table as possible, or make sure the alpha channel is removed if there is no transparency. If they are JPEG, try adjusting the compression.

score 1 · Answer 3 · answered Apr 04 '12 at 15:02

1

Check the example on this page: http://www.w3schools.com/jsref/event_img_onload.asp

Using "image.onload" will start your code only when the image is ready

answered Apr 04 '12 at 15:02

Saturnix

10,130
17
64
120

This link no longer exists – Cos Aug 25 '17 at 13:02

score 1 · Answer 4 · answered Apr 04 '12 at 15:03

Without javascript you can't have events, so you won't be able to know if the image is loaded, at least for the first rendering.

You can also use a css preload (put the image as a background in a hidden div), but that would work better in your first refresh and not while loading.

score 1 · Answer 5 · answered Apr 04 '12 at 15:04

1

You can set a variable to the image, and when it loads, set it to the body background:

var my_bg = new Image();
my_bg.src = "url(mybackground.png)";
document.style.backgroundImage = my_bg;

answered Apr 04 '12 at 15:04

lightningmanic

2,025
5
20
41

score 1 · Answer 6 · answered Apr 04 '12 at 15:08

What you are looking for is an image onLoad method. If you set the image with a display:none it wont be visible. To get around the possible lack of javascript, you do the following:

<body style="background-image:url(image.png);">
<img src="image.png" style="display:none" onLoad="changeBackground();" />
</body>
<script>
document.body.style.backgroundImage = "";
function changeBackground(){
    document.body.style.backgroundImage = "url(image.png)";
}
</script>

This way, if javascript isnt enabled, the bg will load as normal. If it is, it will display at the end

Only load the background-image when it has been fully loaded?

........

6 Answers6

Linked