如何延迟加载使用CSS获取的图像?

时间:2018-04-05 00:39:49

标签: css

首先,我在主页上发现的问题是图片使我webpage滞后。我发现这个article解释了如何延迟加载图像,对我来说这是我的问题的解决方案。

但是,所有示例都与使用HTML获取的图像有关。我使用CSS从我的本地文件中获取图像。如何使用CSS为我的主页延迟加载我的图像?

我使用CSS获取图像的示例

background: -webkit-gradient(linear, left top, left bottom, from(rgba(50, 58, 82, 0.8)), to(rgba(50, 58, 82, 0.8))), url(../images/world.jpeg);
background: linear-gradient(to bottom, rgba(50, 58, 82, 0.8), rgba(50, 58, 82, 0.8)), url(../images/world.jpeg);

如果你需要查看我的任何网站代码,这是我的GitHub repo

1 个答案:

答案 0 :(得分:1)

我认为你问的是错误的问题。图像正在减慢您的网站速度,因此您不应该担心花哨的加载技术,而应该问的是如何使图像加载速度更快。

我查看了你的页面。您的背景图像大小约为7 Mb。它宽6,000像素。不需要那么大的图像。我下载了它并使用Gi​​mp将其缩小到3,000像素宽,并将文件大小削减到2 Mb。通过图像压缩器运行它将其粉碎至800 kb。甚至3000像素宽也可能比必要的宽一点。

你还有其他一些大图像也可以被砍掉。例如,如果这些徽标仅以230px的宽度显示,那么这些徽标不需要是1000 + px宽。

您应该回到更快速加载图片的基本问题,而不是尝试延迟加载。

以下是一些想法:

  1. 了解srcset属性。它允许浏览器根据您提供的不同尺寸选择最佳图像尺寸,以及浏览器提供的其他信息,如用户首选项和可用带宽。
  2. 将图像缩放到多个不同的大小,然后使用srcset让浏览器加载正确的大小。
  3. 您的背景图片可能会使用CSS媒体查询根据屏幕大小选择最佳图像大小。 This question has a demo of how to do that
  4. 使用图像压缩器缩小图像。这是一个很好的:https://compressor.io/
  5. 如果你做了所有这些事情并且它仍然太慢,那么你可以开始变得更有创意,但在你需要之前不要让事情变得复杂。