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

不，你不能。

你可以做的最好的事情是将图像加载到临时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)"); });

Answer 3

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

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

render

这是一个功能fiddle。

我希望它有所帮助。干杯

等待加载后备图像

3 个答案: