jquery 和 ie 以及加载图像的问题答案

【问题标题】：Problem with jquery and ie and loading imagesjquery 和 ie 以及加载图像的问题
【发布时间】：2019-03-01 23:34:26
【问题描述】：

我有一个网页，它由三个部分组成，脚本、样式和正文。正文只是图像表 - 问题是当您第一次加载站点时，所有图像都加载一个在另一个之上 - 一个真正的混乱。这些图像都应该是不可见的，并且只有在单击某些单词时才会出现 - 这一切都是用 javascript 完成的。加载完所有图像后，它们都会消失，然后该站点将按预期方式运行。就好像所有图像都首先以可见的形式读取，然后 javascript 启动并隐藏它们，因为它们被标记为 javascript 隐藏的 div id。我对 safari 4.0.3 和 mozilla 没有这个问题 - 但我对旧版本的 safari 确实有这个问题。有什么方法可以防止图像最初可见？

【问题讨论】：

标签： javascript html image

【解决方案1】：

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

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

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

例如

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

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

【讨论】：

谢谢 - 我正在使用 jquery。我想看看我怎样才能让你的建议发挥作用。有缩略图表。单击一个单词时，会出现一组缩略图，而另一组则消失。缩略图是灯箱演示的一部分。单击缩略图时，会出现较大的图像。
哦，好像你想实现Next Image Set，然后一个缩略图会消失，另一个会出现？当该人单击该缩略图时，它将显示为灯箱演示文稿？我做对了吗？

【解决方案2】：

默认情况下，尝试使用 CSS 隐藏图像。 CSS 规则比 JavaScript 更早应用。
一种常见的做法是在正文中添加一个类。例如，有 css:

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

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

【讨论】：

【解决方案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 元素中的图像。不过，这应该会使所有图像都看不到。

【讨论】：