最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Preload background image - Stack Overflow

programmeradmin3浏览0评论

There's tons of articles of how to preload an image, however I can't seem to find anything useful about preloading a background image with jquery.

I made a simple html mockup of what I'd like to achieve: /

  • A loading div appears
  • Background is loaded
  • Loading div disappears
  • Background DIV appear

I can handle the div transitions but I'm clueless as to how I should go about preloading a css background. Thanks for reading my question :)

There's tons of articles of how to preload an image, however I can't seem to find anything useful about preloading a background image with jquery.

I made a simple html mockup of what I'd like to achieve: http://jsfiddle.net/3rfhr/

  • A loading div appears
  • Background is loaded
  • Loading div disappears
  • Background DIV appear

I can handle the div transitions but I'm clueless as to how I should go about preloading a css background. Thanks for reading my question :)

Share Improve this question edited Dec 27, 2011 at 18:03 Michael A 9,90022 gold badges72 silver badges117 bronze badges asked Dec 27, 2011 at 17:14 pufAmufpufAmuf 7,79514 gold badges63 silver badges97 bronze badges
Add a comment  | 

5 Answers 5

Reset to default 7

You can't as long as it's a background image. Load it normally and then set the background image. Something like this:

var $img = $( '<img src="' + src + '">' );
$img.bind( 'load', function(){
    $( '.yourDiv' ).css( 'background-image', 'url(' + src + ')' );
} );
if( $img[0].width ){ $img.trigger( 'load' ); }

the last line is needed in some browser in case the image is cached.

To do the preloading, why not grab the URL from the css attribute with jQuery? Something like this:

var bg_url = jQuery("#DIV-THAT-NEEDS-PRELOADING").css('background-image');

// using regex to replace the " url( ... ) "...
// apologies for my noobish regex skills...
bg_url = str.replace(/ /g, '', bg_url); // whitespace...
bg_url = str.replace(/url\(["']?/g, '', bg_url); // next, the 'url("'...
bg_url = str.replace(/["']?\)/g, '', bg_url); // finally, the trailing '")'...

// without regex, using substring if confident about no quotes / whitespace...
bg_url = bg_url.substring(4, bg_url.length-1);

// preloading...
var img = new Image();
img.onload = function()
{
    // do transitions here...
};
img.src = bg_url;

Here's a post from last week that covered preloading images with jQuery: HTML 5 File load image as background-image

And here is the solution that post referenced: http://sveinbjorn.org/dataurls_css

You logic is almost good, but you can not catch events for CSS in jquery.

You need to load the background image to some <img> element. Catch the event load of that element and when it's fired you change the background image to that src and do the rest of your logic.

A working example with a mock setTimeout to simulate loading time.

The relevant jQuery code is:

$('#LOADING-SIGN-DIV').fadeOut();
$('#DIV-THAT-NEEDS-PRELOADING').fadeIn();
发布评论

评论列表(0)

  1. 暂无评论