如何在Hugo中偷懒加载图片

312 阅读1分钟

当我在代码谷推出我的电子书的新家时,我没有考虑到我的主机费用,以及为客户加载大量图片所带来的影响。

由于每个页面都很长(没有导航,这就是它们是书而不是文章的意义),一个页面甚至可以达到10MB。

所以我决定通过懒惰地加载它们来解决这个问题,换句话说,浏览器只在用户滚动到该图片时才加载该图片。

这是一个权衡的结果,但我确信99%的人在打开一个页面时都不会马上滚动到那个图片。

问题是......我无法控制标记!所有的内容都是Markdown的。

但我发现Hugo允许我们重写图片的渲染方式。

在你的主题中用这个内容创建文件layouts/_default/_markup/render-image.html:

<img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" loading="lazy" />

这使得生成的HTML具有loading="lazy" 属性,可以懒散地加载图片。