javascript - 在 jquery 中切换 div 背景之前加载图像

Question

我有一个网页，我想在其中切换 div 的背景图像以响应用户交互。到目前为止我所拥有的是:

function updateImg() { 
   imgurl=buildImgURL(); // constructs a URL based on various form values
   $('#mainImage').css("background-image", "url("+imgurl+")");
}

除一件事外，这完全符合我的要求。由于相对较大的背景图像和相对较慢的服务器(两者都不容易修复)的结合，图像加载需要一段时间。因此，当调用 updateImg() 函数时，在加载新背景图像之前，div 会变白半秒左右。我想要的是保留旧背景图像，直到新图像完成加载，然后立即切换。这可能吗？

背景图像由服务器动态生成，因此无法进行任何类型的客户端缓存或预加载。

Answer 1

将图像设置为空元素怎么样？

$("<img id='loaderImg' src='"+imgUrl+"' onload='setBg(this.src)'/>");

然后当图片加载完毕

function setBg(imgUrl) {
    $("#mainImage").css("background-image", "url("+imgUrl+")");
    $("#loaderImg").remove();
}

这样，图片会被加载到一个永远不会显示的图片中，并在图片完全加载(同时缓存)后设置为背景

还没有测试过，但我认为它应该可以工作。