Javascript image change causes embeded UserControls to flicker

Question

I have a n html page being displayed in IE. It has some buttons made up of images with mouseover/mouseout events on them in JavaScript, and a bunch of embedded .Net UserControls.

When the mouseover/mouseout events fire, I change the images src to something else (simple rollover effect). The problem is that the UserControls often (but not always) flicker when this happens.

To be clear, the images don't flicker, and the rest of the page doesn't flicker, just the embedded controls. This page is local, not coming from a server or anything.

So, any ideas?

More information : I've noticed that highlighting text does it too...

Answer 1

If you didn't preload the images, you could see this kind of problem.

To preload the images, just add a special div with the wanted urls.

<div id="preload">
  <img src="/path/to/my/image.png" alt="">
  <img src="/img2.gif" alt="">
</div>

In your css:

#preload { display:none; }

That's it !