Changing the background-Image using Jquery causing a flickering kind of effect

Question

Following is the portion of the script which I am using to create a slider by changing the background image for every imageobject I have for a cycle of time.

   #Sliderimg - height is 500px,

   $("#Sliderimg").css({
        "background-image": "url(../Images/" +SliderImageObj.image + ")",
        "display": "block",
        "z-index": "50px"
    });

What could have gone wrong with this as I'm getting the flickering effect every time I change the image, My problem is not with the new image about to load, its flickering(flashing on to the bottom of the screen) for the old image which is about to be replaced.

Answer 1

You see a flicker because every time you change the background image, your browser has to download it before it can show the background. If the images aren't too big (more than say, 5kb) you can try caching them in the browser by applying them to elements where they won't show up.

Also, 50px isn't a valid z-index, that property requires integers only.