预加载背景图像
有很多关于如何预加载图像的文章，但是我似乎找不到任何有关使用jquery预加载背景图像的有用信息。
我制作了一个简单的html模型，说明了我想要实现的目标： http ： //jsfiddle.net/3rfhr/
- 出现加载div
- 背景已加载
- 加载div消失
- 出现背景DIV
我可以处理div转换，但我对如何预加载css背景毫无头绪。 感谢您阅读我的问题:)
你不能只要它是一个背景图像。 正常加载然后设置背景图像。 像这样的东西：
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' ); } 如果图像被缓存，则在某些浏览器中需要最后一行。
要进行预加载，为什么不用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;
这是上周的post，其中包括使用jQuery预加载图像： HTML 5文件加载图像作为背景图像
以下是post引用的解决方案： http ： //sveinbjorn.org/dataurls_css
你的逻辑几乎是好的，但你不能在jquery中捕获CSS的事件。
您需要将背景图像加载到某个
使用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/
一个带有模拟setTimeout 工作示例来模拟加载时间。
相关的jQuery代码是：
$('#LOADING-SIGN-DIV').fadeOut(); $('#DIV-THAT-NEEDS-PRELOADING').fadeIn();