jquery和ie和加载图像的问题

Question

我有一个由三个部分组成的网页，脚本，样式和正文。身体只是图像表 - 问题是，当你第一次加载网站时，所有的图像加载一个在另一个上面 - 一个真正的混乱。图像应该都是不可见的，只有在点击某些单词时才会出现 - 这都是用javascript完成的。一旦所有图像加载，它们都会消失，然后网站按照预期的方式工作。就好像所有图像都是首次可见，然后javascript开始并隐藏它们，因为它们被标记为javascript隐藏的div id。我没有safari 4.0.3和mozilla的这个问题 - 但我确实有旧版本的safari这个问题。有什么方法可以防止图像最初被看到？

Answer 1

您可以预先缓存图像并仅在需要时显示图像，而不是下载图像然后隐藏它们。

image1 = new Image();
image1.src = "..../../...jpg";
image2 = new Image();
image2.src = "..../../...jpg";
image2 = new Image();
image2.src = "..../../...jpg";

然后，当您需要图像时，将它们添加到src

EG

<img id='img1'onMouseClick="this.src=image1.src" />

如果您正在使用jQuery，那么最好为它获取一些插件。

Answer 2

默认情况下，尝试使用CSS隐藏图像。 CSS规则比JavaScript更快适用。 通常的做法是在身体上添加一个类。例如，有css：

body img {display:none;}
body.JSLoaded img {display:inline;}

默认情况下，图像将被隐藏。加载JavaScript时，将JSLoaded添加到正文中，然后显示图像。 这也是在没有JavaScript的情况下为客户端优雅降级网站的好方法。

Answer 3

预加载图像的非JavaScript方式只是将它们放在内联样式的隐藏div中。

<div id="preload" style="height:1px;overflow:hidden;width:1px;padding:1px;">
  <img src="image1.jpg" alt="" />
  <img src="image2.jpg" alt="" />
  <img src="image3.jpg" alt="" />
</div>

这将加载所有图像并将其保留在缓存中，以便稍后在其他位置显示它们。

我没有做display:none;，因为有些浏览器往往不会在未显示的dom元素中加载图像。这应该可以保留所有图像。