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

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

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

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

---

背景图像由服务器动态生成，因此任何类型的客户端缓存或预加载都是不可能的。

您可以定义一个CSS类，将背景图像属性设置为图像，然后在updateMg（）函数中，设置该div的类，而不是直接修改属性。这可能会缓解问题

比如：

function updateImg() { 
  imgurl=buildImgURL(); // constructs a URL based on various form values
  $('#mainImage').addClass('imageClassName');
}

然后在CSS中：

.imageClassName {
  background-image: url([url to image]);
}

---

由于无法预取图像，因此可以执行以下操作：

预取“正在加载…”图像

设置“加载…”图像作为div的背景，而实际图像正在加载

一旦你的真实图像可用，就做你的事情

请不要让我为它编写jQuery。很简单：）

干杯

---

jrh.

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

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

这样，图像将被加载到一个永远不会显示的图像中，并在图像完全加载（也被缓存）时设置为背景

---

我还没有对此进行测试，但我认为它应该可以工作。

如果服务器根据用户输入动态创建映像，这是不可能的……哎呀，我没有意识到BG映像将根据用户输入生成。太完美了。这正是我想要做的

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