I am currently developing a site that users the jQuery superfish plugin to construct a 3 level deep drop down menu with rounded corners, drop shadows and all of that other head banging, screen smashing, anger inciting stuff us web developers love.
The client is using IE8, and IE7 as well. At the end of each menu, I am placing a 24bit rounded transparent image at the end for the rounded corners at the bottom of the menu. So my code is as follows:
<ul id="nav">
<li><a href="#">Item one</a></li>
<li><a href="#">Item one</a></li>
<li><a href="#">Item one</a></li>
<li>
<a href="#">Item one</a>
<ul>
<li>
<a href="#">Another item</a>
</li>
<li class="lastli2"><img src="images/lastli2.png" /></li>
</ul>
</li>
<li class="lastli"><img src="images/lastli.png" /></li>
</ul>
As you can see I am not using background images on the last elements as they are just images inside of LI elements. When hovering in IE7 and IE8 (I presume IE6 as well) you see a flicker of the last image like it is loading or something. I’ve tried preloading the images, but that doesn’t seem to make a difference whatsoever. If the image is in the markup it should be loading anyway.
So my question is, how can I stop an image flickering in my nav that isn’t a background image? It’s almost like it could be a transparency thing as well, but I wouldn’t even know where to start.
**** Update ****
I solved the issue. It was the fade effect on the menu that was causing the lag. I removed the FX and the issue was solved. Thank you to all those who helped.
I discovered the cause of this issue and update my question to reflect the answer.