IE Preload Images Bug?

Question

Okay, so I'm calling images from a sprite for my image slider. What happens is that when a page is loaded, all slideshow images are displayed horizontaly thus making it appear bugged. A solution we worked out was to set images to preload. It works fine in Firefox, but in IE it appears bugged. Here are the two lines of code that matter (we have put the spacer thing due to another bug in IE):

    <div id="banner"><div class="slideshow"><!--[if IE]>
    <img  id="ban_images1"   src="images/spacer.gif" width="900px"  height="244" border="0"/>
    <img  id="ban_images2"   src="images/spacer.gif" width="900px"  height="244"  border="0"/>
    <img  id="ban_images3"   src="images/spacer.gif" width="900px"  height="244"  border="0"/>
    <img  id="ban_images4"   src="images/spacer.gif"  width="900px"  height="244" border="0"/>
    <img  id="ban_images5"   src="images/spacer.gif" width="900px"  height="244" border="0"/>
    <img  id="ban_images6"   src="images/spacer.gif" width="900px"  height="244" border="0"/>
    <img  id="ban_images7"   src="images/spacer.gif" width="900px" height="244" border="0"/>
    <img  id="ban_images8"   src="images/spacer.gif" width="900px" height="244"  border="0"/>
    <img  id="ban_images9"   src="images/spacer.gif" width="900px" height="244"  border="0"/>
    <img  id="ban_images10"  src="images/spacer.gif" width="900px"  height="244" border="0"/>
<![endif]-->
<![if !IE]>
    <img  id="ban_images1" />
    <img  id="ban_images2" />
    <img  id="ban_images3" />
    <img  id="ban_images4" />
    <img  id="ban_images5" />
    <img  id="ban_images6" />
    <img  id="ban_images7" />
    <img  id="ban_images8" />
    <img  id="ban_images9" />
    <img  id="ban_images10" />
<![endif]>
    </div>

Ban Images simply refer to the sprite that is located at main.gif.

To do preloading, I put the following code at the end of my HTML file:

<div class="slideshowload"><img src="image/main.gif" /></div>

And the following code at the end of my CSS file:

.slideshowload{display:none;}

Any suggestions to make it work in IE?

THanks!

Answer 1

A few things:

• If !IE for non-IE browsers is redundant since only IE understands conditional comments and you're essentially repeating the same action twice with unnecessarily different syntax;
• You need to correct your IE-specific images - width="900px" is not a valid property (should be width="900", no units);
• It is good practice to always specify widths / heights in images regardless of browser - in the case of preloading it is acceptable to use width="1" height="1" at the preload stage since the HTML dimensions of the image don't affect the download itself