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';