IE 预加载图像错误？

Question

好的，我正在为我的图像滑块调用精灵中的图像。发生的情况是，当加载页面时，所有幻灯片图像都水平显示，从而使其看起来有问题。我们制定的解决方案是将图像设置为预加载。它在 Firefox 中工作正常，但在 IE 中似乎有问题。以下是重要的两行代码（由于 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 只是指位于 main.gif 的 sprite。

为了进行预加载，我将以下代码放在 HTML 文件的末尾：

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

将以下代码放在 CSS 文件的末尾：

.slideshowload{display:none;}

有什么建议可以使其在 IE 中工作吗？

谢谢！

Answer 1

有几点：

• 如果 !IE 对于非 IE 浏览器来说是多余的，因为只有 IE 能够理解条件注释，并且您实际上是在使用不必要的不​​同语法重复相同的操作两次；
• 您需要更正特定于 IE 的图像 - width="900px" 不是有效属性（应为 width="900"，无单位）；
• 无论浏览器如何，始终在图像中指定宽度/高度是一种很好的做法 - 在预加载的情况下，可以在预加载阶段使用 width="1" height="1" 因为图像的 HTML 尺寸不影响下载本身