个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-04 10:57:55 25 4
gpt4 key购买 nike

我正在制作一个 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>

最佳答案

两者并没有真正的区别。

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

但是，您在这里可以做的是利用 CSS 的强大功能以及一些 Javascript。将背景图像应用到类中，比如 .with-background，然后使用一些 jQuery:

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

这样，当页面上的其他所有内容(包括其他图像，因此“window.load”上的监听器)都已加载时，应用此类，它将加载背景图像。

作为一个简单的旁注，如果您不希望在内容加载时您的 body 保持空白，您可以做的是拍摄那张巨大的图像，缩小它并对其进行模糊处理(在 Photoshop 或其他图像编辑软件中)。这样“类似于那个图像的东西就在那里” - 同时在 Kb 中非常小。反过来，当应用该类时，您将获得全尺寸图像。

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

关于css - 对于页面内容加载时间，img 或 background-image 哪个更好？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34534154/

25 4 0
文章推荐： python - 用于表大小或元组大小(物理内存)的 django 命令？
文章推荐： linux - 在 linux 中截断日志文件后，新创建的文件充满了许多\0
文章推荐： python - LaunchDaemon 处理系统关闭 - 没有 SIGTERM？
文章推荐： css - 图片下方的 Bootstrap 3 NavBar 品牌文字而不是旁边
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com