预先加载背景图片 [英] Preload background image

问题描述

有大量的文章如何预加载图像，但我似乎找不到任何有用的预装载jquery的背景图像。

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.

我做了一个简单的html模型我想实现：
http://jsfiddle.net/3rfhr/

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

• 载入div


• 载入背景


• 载入div消失


• 出现背景DIV

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

我可以处理div转换，我应该怎么去预加载css的背景。感谢您阅读我的问题：）

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 :)

推荐答案

只要是背景图片，您就不能使用。正常加载，然后设置背景图像。像这样：

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.

这篇关于预先加载背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！