[英]Preload background image
有很多关于如何预加载图像的文章,但是我似乎找不到任何有关使用jquery预加载背景图像的有用信息。
我制作了一个简单的html模型,展示了我想要实现的目标: http : //jsfiddle.net/3rfhr/
我可以处理div转换,但我对如何预加载css背景毫无头绪。 感谢您阅读我的问题:)
你不能只要它是一个背景图像。 正常加载然后设置背景图像。 像这样的东西:
var $img = $( '<img src="' + src + '">' );
$img.bind( 'load', function(){
$( '.yourDiv' ).css( 'background-image', 'url(' + 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;
这是上周的帖子,其中包括使用jQuery预加载图像: HTML 5文件加载图像作为背景图像
以下是帖子引用的解决方案: http : //sveinbjorn.org/dataurls_css
你的逻辑几乎是好的,但你不能在jquery中捕获CSS的事件。
您需要将背景图像加载到某个<img>
元素。 捕获该元素的事件加载,当它被触发时,您将背景图像更改为该src并执行其余逻辑。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.