I have a web page where I want to switch the background image of a div in response to user interaction. What I have so far is:

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

```

This works exactly like I want it to except for one thing. Due to a combination of relatively large background images and a relatively slow server (neither of which can easily be fixed) it takes a while for the image to load. So when the updateImg() function is called the div goes white for half a second or so before the new background image is loaded. What I want is for the old background image to remain until the new image is finished loading and then to switch instantly. Is this possible to do?

The background image is generated on the fly by the server so any sort of client side caching or preloading isn't possible.