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

Question

首先，我在主页上发现的问题是图片使我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。

Answer 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/

如果你做了所有这些事情并且它仍然太慢，那么你可以开始变得更有创意，但在你需要之前不要让事情变得复杂。