javascript - loading image before switching div background in jquery -

I have a web page where I want to change the background image of a div in response to user interaction. What I've been doing so far:

  Function Update IMG () {imgurl = buildImgURL (); // Various form values ​​generate url based on $ ('# main image') CSS ("background-image", "url (" + imgurl + ")"); }  

This works perfectly well as I want to leave it one thing because of the combination of relatively large background images and a relatively slow server (which is not easily fixed The image can take some time to load. Therefore when the updateImg () function is called then the divis is white for one second or before the new background image is loaded. I want the image of the old background to be as long as the new image is not loading and then switch quickly. Is this possible?

Background image is generated on the server, so any type of client side caching or preloading is not possible.

What about setting the image in an empty element?

  $ ("& lt; img id = 'loaderImg' src = div =" post-text "itemprop =" text "> 
 '" + ImgUrl + "' onload = ' SetBg (this.src) '/ & gt; ");  

Then when the image is full

  function setbug (imgUrl) {$ ("# Main Image"). CSS ("background-image", "url (" + imgUrl + ")"); Deleting $ ("# LoaderImg"). }  

In this way, the image will be loaded into an image that will never be displayed, and when the image is fully loaded (and also cached)

< P> It has not been tested, but I think it should work.