jQuery检测css后台图像完成下载

Question

我正在尝试下载图片，然后使用css background-image应用淡入淡出 我可以通过这样的常规<img src=''/>完成此任务：

#mainImg {display:none}

var c = $('#mainImg');
$(new Image()).load(function(){
    c.fadeIn(300);
}).attr('src', c.attr('src'));

但是当它是css background时我怎么能检测到它？ 这是使用jQuery的CSS，但我似乎无法像上面的代码那样得到它并检测下载完成时间

$('<img/>').attr('src', 'image.png').load(function() {
     $('#mainImg').css('background-image', 'url(image.png)');
});

编辑这有帮助了！ How can I check if a background image is loaded? 谢谢@colin

Answer 1

我之前通过暂时将隐藏的子图像附加到div，然后在子图像的加载事件触发时设置其父级的背景图像并淡入其中来完成此操作。最好删除后面的子图像，以保持整洁！您可以将图像附加到任何地方，但这是一个地图应用程序，我必须保持图像与其父div相关联！