Javascript load background-image asynchrously

Question

Is it possible to load a background-image asynchronously?

I've seen many jQuery plugins to load normal image in an asynchronous way, but I can't find if it's possible to preload / asynchronously load a background-image.

EDIT

I clarify my problem. I've been working on this test site http://mentalfaps.com/ The background image is loaded randomly from a set of images refreshed each hour by a chron job (which takes random images on a flickr catalog).

The host is free and slow at the moment, so the background image takes some time to load.

The positioning of the first overlay (the one with the PNG transparent mentalfaps logo) and width are regulated by a function created in the jQuery(document).ready construct.

If you try to refresh the page many times, the width of the right overlay div is 0 (and so you see a "hole" in the layout)

Here is the method to set my positions:

function setPositions(){
    var oH = $('#overlay-header');
    var overlayHeaderOffset = oH.offset();
    var overlayRightWidth = $(window).width() - (overlayHeaderOffset.left + oH.width());
    if (overlayRightWidth >= 0) {
        $('#overlay-right').width(overlayRightWidth);
    } else {
        $('#overlay-right').width(0);
    }
    var lW =  $('#loader-wrapper');
    lW.offset({
        left: (overlayHeaderOffset.left + oH.width() - lW.width())
    });
}

The problem is that the $(window).width() is lower then the effective window width! so the check fails and the script goes for $('#overlay-right').width(0);

any ideas?

once an image is cached, all calls to that image from the browser, irrespective of element, will call the cached version until the cache expires. — zzzzBov, Jun 01 '11 at 19:15

score 8 · Answer 1 · edited May 23 '17 at 10:27

8

Not sure whether I really understand your question, but background images (and all other images) are already loaded asynchronously - the browser will start separate requests for them as soon as it encounters the URL while parsing the HTML.

See this excellent answer for background on loading order: Load and execution sequence of a web page?

If you meant something else, please clarify.

edited May 23 '17 at 10:27

Community

1
1

answered Jun 01 '11 at 19:14

Pekka

442,112
142
972
1,088

score 3 · Answer 2 · answered Jun 01 '11 at 19:20

The trick to loading something in the background is to load it once, so the next time when it is loaded it already is in the cache.

Put the following at the end of your html:

<script>
    var img = new Image();
    img.onload = function () {
        document.getElementsByTagName('body')[0].style.backgroundImage = 'background.png';
    };
    img.src = 'background.png';
</script>

score 2 · Answer 3 · answered Jun 01 '11 at 19:20

2

You could use a prefetch link in the head.

<link rel="prefetch" href="/images/background.jpg">

You should be able to add these links to the head via JavaScript.

answered Jun 01 '11 at 19:20

btford

5,631
2
29
26

score 2 · Answer 4 · answered Jun 01 '11 at 19:35

I like to use CSS to fill the background with a color for page load.

After DOM ready event, I use jQuery to modify the CSS and add a background image. That way, the image isn't loaded until after page loads. Not sure about async, but this method gives the user a decent experience.

Example: http://it.highpoint.edu/

The right side navigation links have a background image. The page initializes with a background color. It is replaced with a background image after page load, via jQuery.

score 1 · Answer 5 · edited Apr 18 '12 at 14:04

1

changes in this file jquery.ImageOverlay.js

set your height and width and enjoy this...

imageContainer.css({
            width : "299px",
            height : "138px",
            borderColor : hrefOpts.border_color
        });

edited Apr 18 '12 at 14:04

DaveShaw

52,123
16
112
141

answered Apr 18 '12 at 06:32

nikunj

11
1

score 0 · Answer 6 · answered Jun 01 '11 at 19:23

0

As it is already mentioned, the background image is loaded asynchronously. If you need to load the background image from JQuery code you may also set the addClass() method to set a CSS class or attr("style=\"background-image:url('myimage.png')\"")

answered Jun 01 '11 at 19:23

Yuri

81
3

score -1 · Accepted Answer · answered Jun 08 '11 at 17:41

-1

Ive found the answer myself, it was a problem due to the .offset() method that gived sometimes the wrong values.

I had the write values using the .position() :

 var overlayHeaderOffset = oH.position();

answered Jun 08 '11 at 17:41

VAShhh

3,494
2
24
37

Title of question is not matching the answer. The question is about the asynchrously loading of image. – nntona Nov 21 '20 at 13:39

Javascript load background-image asynchrously

7 Answers7

Linked