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?

Answer 1

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.

Answer 2

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>