Fading in a background image

Villager picture Villager · Jun 10, 2009 · Viewed 90k times · Source

I have a web page that uses a large image for its background. I was hoping to use jQuery to load the image once it is downloaded (basically the way that bing.com loads its background image). Is this possible with jQuery? If so, is there a plugin that you would recommend?

Answer

Pim Jager picture Pim Jager · Jun 10, 2009

You could first load the image, and then, when it has finished loading, set it as background-image. That way the browser will (hopefully) load the background image from the cache instead of redownloading it. As you requested it as a plugin:

 $.fn.smartBackgroundImage = function(url){
  var t = this;
  //create an img so the browser will download the image:
  $('<img />')
    .attr('src', url)
    .load(function(){ //attach onload to set background-image
       t.each(function(){ 
          $(this).css('backgroundImage', 'url('+url+')' );
       });
    });
   return this;
 }

Use it like this:

 $('body').smartBackgroundImage('http://example.com/image.png');