对于页面内容加载时间，img 或 background-image 哪个更好？

Question

我正在制作一个 tumblr 主题，背景中会有一个相当大的图像（大约 2000x1600 像素）。但是我需要页面的内容，即 tumblr 帖子，以相对快速地加载。以下哪个选项会更快？

<style>
    body {background-image: "background.png"}
</style>

<body>
    <div id="content">
        /* tumblr posts go here */
    </div>
</body>

或

<style>
    img {z-index: 0}
</style>

<body>
    <div id="content">
        /* tumblr posts go here */
    </div>
    <img src="background.png">
</body>

Answer 1

两者并没有太大区别。

如果您打开 Chrome 开发工具并查看“网络”选项卡，加载时间将相同，因为图像的大小保持不变。

但是，您在这里可以做的是利用 CSS 的力量以及一些 Javascript。将背景图像应用到 class，比如 .with-background，然后再添加一些 jQuery:

$(window).load(function(){
  $('body').addClass('with-background');
});

这样，当页面上的所有其他内容（包括其他图像，因此 'window.load' 上的侦听器）加载后，应用此 class，然后将加载背景图像。

作为一个简单的旁注，如果您不希望 body 在内容加载时保持空白，您可以采取该巨大的图像，缩小它并模糊它（在 Photoshop 或其他图像编辑软件）。这样 "something resembling that image is back there" - 在 Kb 中一直非常小。反过来，应用 class 后，您将获得 full-sized 图片。

查看 medium.com 上带有图片的帖子 - 他们做类似的事情。这是一种设计选择，比什么都重要。

对于页面内容加载时间，img 或 background-image 哪个更好？

Which is better, img or background-image, for page content load times?

css

background-image