预加载背景图像

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

我制作了一个简单的html模型，说明了我想要实现的目标： http ： //jsfiddle.net/3rfhr/

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

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

Answer 1

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

var $img = $( '' ); $img.bind( 'load', function(){ $( '.yourDiv' ).css( 'background-image', 'url(https://stackoverflow.com/questions/8647305/preload-background-image/' + src + ')' ); } ); if( $img[0].width ){ $img.trigger( 'load' ); } 

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

Answer 2

要进行预加载，为什么不用jQuery从css属性中获取URL？ 像这样的东西：

 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; 

Answer 3

这是上周的post，其中包括使用jQuery预加载图像： HTML 5文件加载图像作为背景图像

以下是post引用的解决方案： http ： //sveinbjorn.org/dataurls_css

Answer 4

你的逻辑几乎是好的，但你不能在jquery中捕获CSS的事件。

您需要将背景图像加载到某个元素。 捕获该元素的事件负载，当它被触发时，您将背景图像更改为该src并执行其余逻辑。

Answer 5

使用CSS和JavaScript预加载图像，希望这两个链接可以轻松有用。

http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/

http://perishablepress.com/press/2006/11/14/preloading-images-with-css-and-javascript/

Answer 6

一个带有模拟setTimeout 工作示例来模拟加载时间。

相关的jQuery代码是：

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