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

Question

有什么方法可以阻止 <img>仅使用 CSS 标记加载其图像？我想避免使用 JavaScript。

这似乎不起作用(Firebug 仍然显示图像加载):

display: none;
visibility: hidden;

Answer 1

否 — CSS 仅告诉浏览器内容应该是什么样子，它不指定加载行为。

涉及 CSS 的最佳做法是删除 <img>从您的 HTML 中添加标签，并将其替换为通过 CSS 的 background-image 显示图像的元素属性(property)。然后图像在 CSS 中的控制比在 HTML 中更多。

不过，我仍然认为您无法保证何时会下载图像 — 我似乎记得早期版本的 Safari 会下载样式表中引用的图像，即使它们未在当前页面上使用也是如此？使用 JavaScript(在您想要加载图像时创建 <img> 标记)可能是控制图像加载时间的最可靠方法。

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