防止图像预加载？

我正在处理的网站有一个列表ul，上面有100个（li）项目符号。他们每个人都链接到另一个html网站。无论何时您将鼠标悬停在其中一个链接上，我都想要显示图像预览。图像应从左侧缓慢滑入。防止图像预加载？

由于每个预览图像的尺寸高达40kb，我其实不要想要预载图像。什么是防止它的最好方法？我想这样做只能通过CSS，没有JS，如果可能的话。

我的想法：

一）缺省状态：<img> - 标签与display:none;悬停状态：它设置为display:inline。问题：transition不display :(工作

B）简单地用一个div，而不是写一个CSS规则为每li，使上悬停与预览图像对应的背景图像被分配给它。。这是否会阻止图像的预加载？

不，你需要JS来做到这一点。无论“显示”如何，都会加载CSS图像。 – 2012-03-14 18:45:05

如果您的CSS知道图像路径，浏览器可能会决定继续并预加载它。悬停时显示背景图像似乎会阻止预加载，但仅在第一次加载时才会预加载;之后大多数浏览器都会缓存它。请记住，'li：hover'在IE6中将不起作用，因此希望您不要将其作为目标浏览器。 – 2012-03-14 18:46:08

只针对最新的IE，Firefox和Chrome版本。 – BlueHorizon 2012-03-14 18:47:48

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

2012-03-14 18:47:34

谢谢您的肯定！我对此不太确定。像4MB的图像预加载对我来说似乎是一种浪费，而最有可能只有5％会被定期使用。 – BlueHorizon 2012-03-14 18:50:38

您必须添加仅用于悬停的样式，这会使标记有点杂乱，但它是可行的。您可以通过将大图像设置为悬停时的背景来轻松测试，然后在将鼠标悬停在其上时等待它加载。 – 2012-03-14 18:56:39

你不能用CSS来做到这一点，因为你的浏览器会加载所有内容（不管display：none）。我会推荐JavaScript或服务器端像PHP一样。

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

2012-03-14 18:48:27 daker

Woudn't马修达内尔的解决方案可以防止这种情况发生，还是不管它是否会被加载？ – BlueHorizon 2012-03-14 18:52:28

任何人在学习如何使用图像精灵进行翻滚之前都会记得时间，并且获得了关于图像闪烁的第一个错误，这与您不同。 – 2012-03-14 18:53:25

BlueHorizon：我不能说100％肯定背景图片，但我很确定它会加载反正。我不认为。依赖于浏览器。马修：你的意思是说，当你使用图片精灵时，浏览器不会加载整个图片？这不是真的。 – daker 2012-03-14 18:57:16

回答