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

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