How to remove background image change flicker
css, html, javascript, jquery
Solution
Within a window.load() function,
make sure all the images are loaded onto the page. FYI - You probably want to set each image's CSS position to absolute, with a Top:0px and Left:0px, all within a parent div that has a position:relative, with a certain width and height.
set display:none to the ones that should'nt be shown as DC_ pointed out
use jquery's hover method or click method to click on the image. Within the method function you choose, fadeOut() the current imag and fadeIn() the image that has a display:none associated to it.
Problem
I have a `<div>` with an image as a background. I have it so that whenever someone hovers over the `<div>`, the background image changes to some other image. The problem is, the first time when your mouse hovers over the `<div>`, the background image flickers as it loads and you see no image for few milliseconds. How do I remove this flicker? How do I load the image for the hover before the user actually hovers over the `<div>` so the effect is immediate. My code for changing the `<div>` background is very simple: ``` #someID{ background-image: *image source*; } #someID:hover{ background-image: *Another image source* } ``` I know that there is a solution with putting the two desired images in one image and then play with the background position, but that's not an option here because I always set the background image to be like this: ``` image-size: 100% 100%; ```