Question

我正在制作一个tumblr主题，在背景中会有一个非常大的图像（大约2000x1600px）。但是，我需要页面的内容，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。将背景图像应用于类，例如.with-background，然后使用一些jQuery：

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

这样，当加载页面上的其他内容（包括其他图像，即'window.load'上的监听器）时，应用此类，然后加载背景图像。

作为一个简单的旁注，如果你不希望你的身体在内容加载时保持空白，你可以做的就是拍摄那个巨大的图像，缩小它并模糊它（在Photoshop或其他图像编辑软件中）。这样“类似于那个图像的东西又回到了那里” - 在Kb中一直很小。反过来，当应用课程时，您将获得全尺寸图像。

在medium.com上查看带有图片的帖子 - 他们做了类似的事情。这是一个设计选择，最重要的是。

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

1 个答案: