防止预加载图像？答案

【问题标题】：prevent preloading of images?防止预加载图像？
【发布时间】：2012-03-14 18:40:24
【问题描述】：

我正在处理的网站有一个列表ul，其中包含超过 100 (li) 个要点。它们中的每一个都链接到另一个 html 站点。每当您将鼠标悬停在其中一个链接上时，我都想显示图像预览。图像应从左侧缓慢滑入。

由于每个预览图像的大小高达 40kb，我实际上不想预加载图像。预防它的最佳方法是什么？如果可能的话，我想只通过 CSS 来做这件事，而不是 JS。

我的想法：

a) 默认状态：<img>-tag 和 display:none; 悬停状态：将其设置为 display:inline。问题：transition 不适用于 display :(.

b) 只需使用div 代替并为每个li 编写一个CSS 规则，以便在悬停时将相应的背景图像与预览图像分配给它。这会阻止图像的预加载吗？

【问题讨论】：

不，您需要 JS 来执行此操作。加载 CSS 图像，无论“显示”如何。
如果您的 CSS 知道图像的路径，浏览器可能会决定继续并预加载它。仅在悬停时显示背景图像似乎会阻止预加载，但仅在第一次加载时；之后，大多数浏览器都会缓存它。请记住，li:hover 在 IE6 中不起作用，因此希望您不要尝试将其作为目标浏览器。
只针对最新的 IE、Firefox 和 Chrome 版本。

【解决方案1】：

如果您将其添加为背景图像，但仅在悬停时显示，则图像不会加载，直到用户将鼠标悬停在具有该样式的任何内容上。您应该能够内联设置背景图像，而不是将图像文件输出为 IMG

【讨论】：

【解决方案2】：

您不能仅使用 CSS 来执行此操作，因为您的浏览器会加载所有内容（无论 display:none 是什么）。我会推荐 javascript 或服务器端，如 php。

可能的 jquery 负载可能是什么？ http://api.jquery.com/load/

【讨论】：

Matthew Darnell 的解决方案不会阻止这种情况，还是无论如何都会加载它？
任何人如果记得在他们学会如何使用图像精灵进行翻转并遇到第一个关于图像闪烁的错误之前的时间，就会不同意你的看法。
BlueHorizon：我不能说我 100% 确定背景图像，但我很确定它无论如何都会加载。我很可能也依赖浏览器。马修：所以你的意思是当你使用图像精灵时，浏览器不会加载整个图像？那不是真的。