等待加载背景图像

Question

我的 javascript 中有这一行：

$("#botbg").css("background-image", "url(/png/" + epage + ".jpg)");

“botbg”是一个 div。 是否可以将回调附加到此函数？我只是希望其他操作等到完成。

这些都没有成功：

$("#botbg").css("background-image", "url(/png/" + epage + ".jpg)").load(function(){
//...
});

$("#botbg").css("background-image", "url(/png/" + epage + ".jpg)").one("load", function(){
//...
});

$("#botbg").css("background-image", "url(/png/" + epage + ".jpg)").ready(function(){
//...
});

Answer 1

在 jQuery 中，回调函数仅适用于 asynchronous 任务，并且由于 css 函数是 synchronized 函数，因此没有回调之类的东西，因此您在 @987654325 之后放置的每一行代码@函数将被立即调用。

但是，您可以跟踪背景图像的负载，但即使这样做，也不能保证您的代码将在图像显示后执行，特别是在浏览器需要一些时间render 的大图像中图片。要跟踪您的图像是否已加载，您可以执行以下操作：

$img = $('<img src="/png/'+epage+'.jpg" id="myImg"/>');//now it will work
$img.bind('load',function(){
    $("#botbg").css("background-image", "url(/png/" + epage + ".jpg)");
});

这是一个功能性的fiddle。

我希望它有所帮助。干杯

Answer 2

试试

var img = new Image();
img.src = url;
img.onload = function( ) {
    $("#botbg").css("background-image", "url(" + url + ")");
}

Answer 3

不，你不能。

您可以做的最好的事情是将图像加载到临时 div 中，然后在调用加载回调时设置背景图像，如下所示：

<div id="tmp"><img src="/png/yourimage.jpg" /></div>

$("#tmp").load(function(){
    $("#botbg").css("background-image", "url(/png/yourimage.jpg)");
});

编辑

调用 .load() 函数的新方法

<div id="tmp"><img src="/png/yourimage.jpg" /></div>

$("#tmp").on("load", function() {
    $("#botbg").css("background-image", "url(/png/yourimage.jpg)");
});