当我在代码谷推出我的电子书的新家时,我没有考虑到我的主机费用,以及为客户加载大量图片所带来的影响。
由于每个页面都很长(没有导航,这就是它们是书而不是文章的意义),一个页面甚至可以达到10MB。
所以我决定通过懒惰地加载它们来解决这个问题,换句话说,浏览器只在用户滚动到该图片时才加载该图片。
这是一个权衡的结果,但我确信99%的人在打开一个页面时都不会马上滚动到那个图片。
问题是......我无法控制标记!所有的内容都是Markdown的。
但我发现Hugo允许我们重写图片的渲染方式。
在你的主题中用这个内容创建文件layouts/_default/_markup/render-image.html:
<img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" loading="lazy" />
这使得生成的HTML具有loading="lazy" 属性,可以懒散地加载图片。