title: IE Preload Images Bug?
body: <p>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):</p>
  
  <pre><code>    &lt;div id="banner"&gt;&lt;div class="slideshow"&gt;&lt;!--[if IE]&gt;
      &lt;img  id="ban_images1"   src="images/spacer.gif" width="900px"  height="244" border="0"/&gt;
      &lt;img  id="ban_images2"   src="images/spacer.gif" width="900px"  height="244"  border="0"/&gt;
      &lt;img  id="ban_images3"   src="images/spacer.gif" width="900px"  height="244"  border="0"/&gt;
      &lt;img  id="ban_images4"   src="images/spacer.gif"  width="900px"  height="244" border="0"/&gt;
      &lt;img  id="ban_images5"   src="images/spacer.gif" width="900px"  height="244" border="0"/&gt;
      &lt;img  id="ban_images6"   src="images/spacer.gif" width="900px"  height="244" border="0"/&gt;
      &lt;img  id="ban_images7"   src="images/spacer.gif" width="900px" height="244" border="0"/&gt;
      &lt;img  id="ban_images8"   src="images/spacer.gif" width="900px" height="244"  border="0"/&gt;
      &lt;img  id="ban_images9"   src="images/spacer.gif" width="900px" height="244"  border="0"/&gt;
      &lt;img  id="ban_images10"  src="images/spacer.gif" width="900px"  height="244" border="0"/&gt;
  &lt;![endif]--&gt;
  &lt;![if !IE]&gt;
      &lt;img  id="ban_images1" /&gt;
      &lt;img  id="ban_images2" /&gt;
      &lt;img  id="ban_images3" /&gt;
      &lt;img  id="ban_images4" /&gt;
      &lt;img  id="ban_images5" /&gt;
      &lt;img  id="ban_images6" /&gt;
      &lt;img  id="ban_images7" /&gt;
      &lt;img  id="ban_images8" /&gt;
      &lt;img  id="ban_images9" /&gt;
      &lt;img  id="ban_images10" /&gt;
  &lt;![endif]&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Ban Images simply refer to the sprite that is located at main.gif.</p>
  
  <p>To do preloading, I put the following code at the end of my HTML file:</p>
  
  <pre><code>&lt;div class="slideshowload"&gt;&lt;img src="image/main.gif" /&gt;&lt;/div&gt;
  </code></pre>
  
  <p>And the following code at the end of my CSS file:</p>
  
  <pre><code>.slideshowload{display:none;}
  </code></pre>
  
  <p>Any suggestions to make it work in IE?</p>
  
  <p>THanks!</p>