javascript - 判断body的背景图片（css）是否已经加载

Question

根据某些条件，会加载不同的背景图像：

$('body').css('background','url(image.png)');

有没有办法确定背景图像是否已加载？加载图像后，我需要执行一个函数。

Answer 1

您可以将图像加载到隐藏<img>标签中并为标签分配onload处理程序。在 onload 处理程序中，您可以填充主体的背景图像（这应该或多或少立即发生，因为图像现在在浏览器缓存中），然后也运行您的自定义代码。

var hiddenImg = new Image();
hiddenImg.onload = function(){
    $('body').css('background','url(' + this.src + ')');
    your_custom_onload_code();
};
hiddenImg.src = 'image.png';

Answer 2

var img = new Image ();
img.onload = function () { $('body').css('background','url(image.png)'); };
img.src = src;