如何在Hugo中實現圖片的懶加載

當我在我的電子書網站The Valley of Code上推出新的主頁時，我並沒有考慮到我的託管費用以及為客戶加載大量圖片的影響。

由於每個頁面非常長（沒有導航，這就是它們作為書籍而不是文章的目的），一個頁面的大小甚至可能達到10MB。

因此，我決定通過使用懶加載來解決這個問題，也就是說，當用戶滾動到該圖片時，瀏覽器只加載該圖片。

這是一個權衡，但我相信99%的人打開一個頁面後甚至根本不會立即滾動到該圖片。

問題是…我無法控制標記！所有的內容都在Markdown中。

但是我發現Hugo允許我們覆蓋圖片的呈現方式。

在您的主題中創建文件layouts/_default/_markup/render-image.html，內容如下：

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

這將使生成的HTML具有loading="lazy"屬性，從而實現圖片的懶加載。

tags: [“hugo”, “image lazy loading”]