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' ); }

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

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

这是上周发布的一篇文章，内容包括使用jQuery预加载图片：HTML 5 File load image as background-image

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

Answer 4

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

您需要将背景图片加载到某个<img>元素。捕获该元素的事件加载，当它被触发时，您将背景图像更改为该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

A working example使用模拟setTimeout来模拟加载时间。

预加载背景图像

6 个答案: