javascript - 等待加载背景图像

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

尝试

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

Answer 2

在 jQuery 中，回调函数只应用于asynchronous任务，因为css函数是一个synchronized函数，所以没有回调这样的东西，因此你在.css()函数之后放置的每一行代码都会被立即调用。

但是，您可以跟踪背景图像的负载，但即使这样做，也不能保证您的代码将在图像显示后执行，特别是在浏览器需要一些时间才能显示图像的大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)");
});

这是一个功能小提琴。

我希望它有所帮助。干杯

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