javascript 预加载背景图片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8647305/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Preload background image
提问by pufAmuf
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.
有很多关于如何预加载图像的文章，但是我似乎找不到关于使用 jquery 预加载背景图像的任何有用信息。
I made a simple html mockup of what I'd like to achieve: http://jsfiddle.net/3rfhr/
我制作了一个简单的 html 模型来说明我想要实现的目标：http: //jsfiddle.net/3rfhr/
- A loading div appears
- Background is loaded
- Loading div disappears
- Background DIV appear
- 出现一个加载div
- 背景已加载
- 加载div消失
- 背景 DIV 出现
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 :)
我可以处理 div 转换，但我对如何预加载 css 背景一无所知。感谢您阅读我的问题:)
采纳答案by Mark Kahn
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.
如果图像被缓存，某些浏览器需要最后一行。
回答by Chris Kempen
To do the preloading, why not grab the URL from the cssattribute with jQuery? Something like this:
要进行预加载，为什么不css使用 jQuery从属性中获取 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;
回答by Mike Gwilt
Here's a post from last week that covered preloading images with jQuery: HTML 5 File load image as background-image
这是上周的一篇文章，介绍了使用 jQuery 预加载图像：HTML 5 File load image as background-image
And here is the solution that post referenced: http://sveinbjorn.org/dataurls_css
这是后引用的解决方案：http: //sveinbjorn.org/dataurls_css
回答by Bruno Costa
You logic is almost good, but you can not catch events for CSS in jquery.
您的逻辑几乎很好，但是您无法在 jquery 中捕获 CSS 的事件。
You need to load the background image to some <img>element. Catch the event load of that element and when it's fired you change the background image to that src and do the rest of your logic.
您需要将背景图像加载到某个<img>元素。捕获该元素的事件负载，当它被触发时，您将背景图像更改为该 src 并执行其余的逻辑。
回答by Josh Smith
A working examplewith a mock setTimeoutto simulate loading time.
工作示例使用模拟setTimeout来模拟加载时间。
The relevant jQuery code is:
相关的 jQuery 代码是：
$('#LOADING-SIGN-DIV').fadeOut();
$('#DIV-THAT-NEEDS-PRELOADING').fadeIn();
