我已经构建了一个相当大的老式 HTML 图像地图。当您将鼠标悬停在区域标签上时，将加载另一个图像来替换整个地图。总共有 30 个鼠标悬停图像，为了避免加载延迟，我使用 jQuery 预加载了它们。
Firebug Net 面板显示所有图像在页面加载时加载正常（尚未触发鼠标悬停）。现在，当我将鼠标悬停在一个区域上时，萤火虫显示该图像正在第二次请求。尽管我在 firebug 中清楚地看到文件名高了几行，但这仍然是事实。
这是正常行为吗？似乎预加载工作......但鼠标悬停仍然向服务器发送请求以获取图像，导致图像交换前有 1-2 秒的延迟。
这都是直接的 html，不涉及 AJAX。
谢谢
【问题讨论】：
标签： image preloading
您可能需要调整 Web 服务器上的缓存配置，以便浏览器知道不要重新下载图像。
【讨论】：
您是否看到 Firebug 未打开时的 1-2 秒延迟？我遇到过类似的问题，并且永远无法真正判断它是否真的再次请求图像。在跟踪我的日志时，我也不会看到新的请求。此外，我在浏览 Safari 检查器时从未见过这种行为，因此我将其归结为 Firebug。
【讨论】：
可以将一个图像链接到特定部分的特定图像中的多个页面。
这称为 Html 中的图像映射。
您只需指定图像的哪些区域应该链接到哪里。
在下面的示例中，如果您将鼠标放在左上角，它会链接到 xyz.com ....，而在右下角 .... 它会链接到 abc.com。
<img src="test.jpg" usemap = #example border=0>
<map name=example>
<area shape=Rect Coords=0,0,29,29 Href="http://www.example.com">
<area shape=Rect Coords=30,30,59,59 Href="http://www.example.com">
</map>
在上面的例子中，我们只使用了矩形图像映射。 我们可以使用一些不同的形状，比如圆形或三角形。可能的形状有：
【讨论】：