Javascript load background-image asynchrously

Javascript load background-image asynchrously

Is it possible to load a background-image asynchronously?

Ive seen many jQuery plugins to load normal image in an asynchronous way, but I cant find if it's possible to preload / asyncronously 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 (wich 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 costruct.

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 by Pekka ? for Javascript load background-image asynchrously

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 by Daniel Baulig for Javascript load background-image asynchrously

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:

Answer by btford for Javascript load background-image asynchrously

You could use a prefetch link in the head.

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

Answer by Yuri for Javascript load background-image asynchrously

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

Answer by Teddy for Javascript load background-image asynchrously

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.

Answer by VAShhh for Javascript load background-image asynchrously

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

Answer by nikunj for Javascript load background-image asynchrously

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

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72