如果我在侧边栏上使用此 html 加载图像
<img src="http://fc06.deviantart.net/fs70/f/2012/099/d/f/stackoverflow_16x16_icon_by_muntoo_stock-d4vl2v4.png" height="200px" width="200px" alt="image" />
它会比我放在侧边栏上加载得更快/更慢吗 我的 style.css(在 header 中调用)在哪里
.image {
width: 200px;
height: 200px;
background-image: url('http://fc06.deviantart.net/fs70/f/2012/099/d/f/stackoverflow_16x16_icon_by_muntoo_stock-d4vl2v4.png');
}
<div class="image"></div>
最佳答案
这可以使用 Firebug(在 Net 下)、Chrome 开发者工具(在 Network 下)、Fiddler 或您喜欢的任何其他 HTTP 嗅探器轻松验证。
如果您将图像放在 CSS 中作为背景图像,则图像只会在该类实际使用并且可见时才会下载。如果将它放在 img
中,它将立即下载并阻止渲染,即使它是不可见的。
最后,如果您计算图像本身的加载速度,它们都一样快。 真正的问题是感知的性能是否更好,因为图像下载的顺序可能会有所不同,具体取决于您放置元素的位置。
不过我会更担心其他方面。将图像作为背景图像意味着:
- 图片不是内容
- 不可打印
- 您可以使用 sprite 来减少 HTTP 请求的数量(从而提高性能)
- 是slower to animate背景图像比 img
关于css - 图像在 HTML 或 CSS 中加载速度更快吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6716262/