javascript 你能阻止 <img> 标签使用 CSS 加载它的图像吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4528052/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can you stop an <img> tag from loading its image using CSS?
提问by CoolGoose
Is there any way to stop an <img>tag loading its image by just using CSS? I would like to avoid using JavaScript.
有什么方法可以<img>仅使用 CSS来阻止标签加载其图像？我想避免使用 JavaScript。
This doesn't seem to work (Firebug still shows the images loading):
这似乎不起作用（Firebug 仍然显示图像加载）：
display: none;
visibility: hidden;
采纳答案by Paul D. Waite
No — CSS only tells browsers what content should look like, it doesn't specify loading behaviour.
不——CSS 只告诉浏览器内容应该是什么样子，它没有指定加载行为。
The best you could do that involves CSS is to remove the <img>tag from your HTML, and replace it with an element that shows an image via CSS's background-imageproperty. Then the image is controlled more in the CSS than the HTML.
涉及 CSS 的最佳做法是<img>从 HTML 中删除该标签，并将其替换为通过 CSSbackground-image属性显示图像的元素。然后图像在 CSS 中比在 HTML 中受到更多的控制。
I still don't think you can guarantee when the image will be downloaded though — I seem to remember early versions of Safari would download images referenced in a stylesheet even if they weren't used on the current page? Using JavaScript (to create the <img>tag when you want the image loaded) is probably the most reliable way of controlling the timing of images getting loaded.
我仍然认为你不能保证图像何时会被下载——我似乎记得早期版本的 Safari 会下载样式表中引用的图像，即使它们没有在当前页面上使用？使用 JavaScript（<img>在您想要加载图像时创建标记）可能是控制图像加载时间的最可靠方法。
However, have a look at the page linked to from @Stackle's answerto see the loading behaviour of browsers in April 2012 with different bits of CSS that hide elements with background images.
但是，请查看从@Stackle 的答案链接到的页面，以了解 2012 年 4 月浏览器的加载行为，其中包含隐藏带有背景图像的元素的不同 CSS 位。
回答by tanapoln
This is an old question but today we can do it by using css only.
这是一个老问题，但今天我们可以仅使用 css 来完成。
The answer is Yes, but not support on some browser. See this http://timkadlec.com/2012/04/media-query-asset-downloading-results/
答案是肯定的，但在某些浏览器上不支持。看到这个http://timkadlec.com/2012/04/media-query-asset-downloading-results/
回答by Aaronontheweb
You can PRELOAD images using CSS only, but not actually delay the loading of images using CSS only.
您可以仅使用 CSS 预加载图像，但实际上并不能仅使用 CSS延迟图像的加载。
This can, however, be done easily using something like jQuery Lazy Loader, which is MUCH easier than trying to do it by hand.
然而，这可以使用jQuery Lazy Loader 之类的东西轻松完成，这比尝试手动完成要容易得多。
回答by George
Place this at the end of your style sheet:
将其放在样式表的末尾：
* img { display: none !important; }
回答by IndelibleHeff
You then set them all to be
然后您将它们全部设置为
.img{visibility:hidden;}
this will prevent them from making an http request but still preserves their size and spacing in the document preventing any redraws.
这将阻止他们发出 http 请求，但仍会在文档中保留它们的大小和间距，以防止任何重绘。
then when you want to show your hidden images (for instance the ones in view) you add a class to the surrounding html element and in your css tell this to be
然后当你想显示隐藏的图像（例如视图中的图像）时，你向周围的 html 元素添加一个类，并在你的 css 中告诉它是
.show .img {visibility:visible;}
That should do it, Holmes.
应该这样做，福尔摩斯。
