Javascript 预加载背景图像

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

我制作了一个简单的html模型来实现我的目标：

• 此时会出现一个加载div
• 背景已加载
• 加载分区消失
• 出现背景DIV

---

我可以处理div转换，但对于如何预加载css背景，我一无所知。感谢您阅读我的问题：）

只要是背景图像，您就不能。正常加载，然后设置背景图像。大概是这样的：

var $img = $( '<img src="' + src + '">' );
$img.bind( 'load', function(){
    $( '.yourDiv' ).css( 'background-image', 'url(' + src + ')' );
} );
if( $img[0].width ){ $img.trigger( 'load' ); }

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;

var$img=$（''）；
$img.bind（'load'，function（）{
$（'.yourDiv'）.css（'background image'，'url（'+src+'））；
} );
if（$img[0].width）{$img.trigger（'load'）；}

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

使用模拟

设置超时来模拟加载时间

相关jQuery代码为：

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

要进行预加载，为什么不使用jQuery从
css
属性获取URL？大概是这样的：

var $img = $( '<img src="' + src + '">' );
$img.bind( 'load', function(){
    $( '.yourDiv' ).css( 'background-image', 'url(' + src + ')' );
} );
if( $img[0].width ){ $img.trigger( 'load' ); }

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中捕获CSS事件

您需要将背景图像加载到一些
以下是上周的一篇文章，其中介绍了使用jQuery预加载图像：

这里是后引用的解决方案：
Aha，因此，
src
部分由图像的url重新绘制？是的，
src
是图像url，将其设置为您需要的任何内容。Chris Kempen的回答有一个好主意，他从CSS中获取了src，尽管我不确定第二行是什么，因为不能是一个强有力的词。您可以使用文件Api加载图像，并将src属性设置为“data:image/gif；base64，…my…encoded…image”请参阅下面的我的文章，以参考另一篇介绍此技术的文章。嗯，也许我做错了什么<代码>缺失）在参数列表之后
@ChrisKempen——您可以通过使用
$.fn.prelomage=function（）{返回这个.each（function（）{……}；}
并用类似
$self.trigger（'loaded'）的东西替换加载函数，轻松地将其作为jQuery插件
--注意，在这种情况下，还应防止双重调用函数（最后一行有时会双重调用回调，但在这种情况下并不重要，所以我忽略了它）
setTimeout
仅用于模拟加载时间，没有其他原因。第二行可能应该是regex，除非你肯定所有浏览器都会忽略空白？（我花了一分钟才意识到，解析
url（…）
）是从css属性中剥离
url（…）
）。是的，当然可以使用正则表达式，据我所知，jQuery应该总是给您一个很好的字符串值；）是的，意识到：）在你回答的时候就编辑了我之前的评论，虽然担心空格和/或引号。嗨，克里斯，这看起来很棒！虽然，如果这看起来很愚蠢，很抱歉，但是你能告诉我我做错了什么吗？在CSS中为您的
div
指定一个特定的
width
和
height
，比如宽度和高度都使用
500px
，这应该可以做到：）这可能是使用HTML5API的唯一解决方案，但是使用URL进行常规图像加载时，此解决方案比@cWalves的解决方案要慢。由于调试器显示较大的base64编码图像数据，因此图像加载更慢，调试也更慢。