jquery - Javascript load background-image asynchrously - Stack Overflow

admin管理员组

文章数量:1296457

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 / 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?

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?

• javascript
• jquery
• jquery-ui
• html
• css

Share Improve this question Follow edited May 9, 2021 at 22:20 Jason Aller 3,6542828 gold badges4141 silver badges3939 bronze badges asked Jun 1, 2011 at 19:12 VAShhhVAShhh 3,50422 gold badges2525 silver badges3939 bronze badges 2

• 1 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 Commented Jun 1, 2011 at 19:15
• I'm pretty sure that all images are loaded asynchronously. – James Commented Jun 1, 2011 at 19:16

Add a comment  | 

7 Answers 7

Sorted by: Reset to default 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.

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>

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.

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.

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

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')\"")

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

本文标签： jqueryJavascript load backgroundimage asynchrouslyStack Overflow