首先,我在主页上发现的问题是图片使我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。
答案 0 :(得分:1)
我认为你问的是错误的问题。图像正在减慢您的网站速度,因此您不应该担心花哨的加载技术,而应该问的是如何使图像加载速度更快。
我查看了你的页面。您的背景图像大小约为7 Mb。它宽6,000像素。不需要那么大的图像。我下载了它并使用Gimp将其缩小到3,000像素宽,并将文件大小削减到2 Mb。通过图像压缩器运行它将其粉碎至800 kb。甚至3000像素宽也可能比必要的宽一点。
你还有其他一些大图像也可以被砍掉。例如,如果这些徽标仅以230px的宽度显示,那么这些徽标不需要是1000 + px宽。
您应该回到更快速加载图片的基本问题,而不是尝试延迟加载。
以下是一些想法:
如果你做了所有这些事情并且它仍然太慢,那么你可以开始变得更有创意,但在你需要之前不要让事情变得复杂。