预加载背景图像

Question

有很多关于如何预加载图像的文章,但是我似乎找不到任何有关使用jquery预加载背景图像的有用信息.

我制作了一个简单的html模型,展示了我想要实现的目标:http: //jsfiddle.net/3rfhr/

• 出现加载div
• 背景已加载
• 加载div消失
• 出现背景DIV

我可以处理div转换,但我对如何预加载css背景毫无头绪.感谢您阅读我的问题:)

Answer 1

你不能只要它是一个背景图像.正常加载然后设置背景图像.像这样的东西:

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

如果图像被缓存,则在某些浏览器中需要最后一行.