您可以停止< img>标签使用CSS加载图片？ [英] Can you stop an <img> tag from loading its image using CSS?

问题描述

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

Is there any way to stop an <img> tag loading its image by just using CSS? I would like to avoid using JavaScript.

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

This doesn't seem to work (Firebug still shows the images loading):

display: none;
visibility: hidden;

推荐答案

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

No — CSS only tells browsers what content should look like, it doesn’t specify loading behaviour.

涉及CSS的最佳方法是删除< img> 标签，然后将其替换为通过CSS的 background-image 属性显示图像的元素。这样，图像在CSS中的控制就比HTML中的更多。

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-image property. Then the image is controlled more in the CSS than the HTML.

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

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.

但是，请查看链接到 @Stackle的答案到的页面请参阅2012年4月使用不同位CSS来隐藏带有背景图像的元素的浏览器的加载行为。

However, have a look at the page linked to from @Stackle’s answer to see the loading behaviour of browsers in April 2012 with different bits of CSS that hide elements with background images.

这篇关于您可以停止< img>标签使用CSS加载图片？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！