你能阻止<img/>标签使用CSS加载它的图像吗？

Question

有没有办法只使用CSS来阻止<img>标记加载其图像？我想避免使用JavaScript。

这似乎不起作用（Firebug仍显示图像加载）：

display: none;
visibility: hidden;

Answer 1

不 - CSS只告诉浏览器哪些内容应该是什么样的，它没有指定加载行为。

您可以做的最好的事情就是从HTML中删除<img>标记，并将其替换为通过CSS的background-image属性显示图像的元素。然后，CSS中的图像比HTML更受控制。

我仍然认为你不能保证何时下载图像 - 我似乎记得早期版本的Safari会下载样式表中引用的图像，即使它们没有在当前页面上使用过吗？使用JavaScript（在你想要加载图像时创建<img>标签）可能是控制图像加载时间的最可靠方法。

但是，请查看从@Stackle’s answer链接到的页面，以查看2012年4月浏览器的加载行为，其中包含隐藏带背景图像的元素的不同CSS。

Answer 2

这是一个老问题，但今天我们只能使用css来完成。

答案是肯定的，但某些浏览器不支持。 见http://timkadlec.com/2012/04/media-query-asset-downloading-results/

Answer 3

你可以PRELOAD images using CSS only，但实际上并没有使用CSS延迟加载图片。

然而，这可以使用像jQuery Lazy Loader这样的东西轻松完成，这比手动尝试更容易。

Answer 4

将它放在样式表的末尾：

* img { display: none !important; }

Answer 5

然后将它们全部设为

    .img{visibility:hidden;} 

这会阻止他们发出http请求，但仍会在文档中保留其大小和间距，以防止重绘。

然后当你想要显示隐藏的图像（例如视图中的图像）时，你将一个类添加到周围的html元素中，并在你的CSS中告诉它是

    .show .img {visibility:visible;}

应该这样做，福尔摩斯。