當我在我的電子書網站The Valley of Code上推出新的主頁時,我並沒有考慮到我的託管費用以及為客戶加載大量圖片的影響。
由於每個頁面非常長(沒有導航,這就是它們作為書籍而不是文章的目的),一個頁面的大小甚至可能達到10MB。
因此,我決定通過使用懶加載來解決這個問題,也就是說,當用戶滾動到該圖片時,瀏覽器只加載該圖片。
這是一個權衡,但我相信99%的人打開一個頁面後甚至根本不會立即滾動到該圖片。
問題是…我無法控制標記!所有的內容都在Markdown中。
但是我發現Hugo允許我們覆蓋圖片的呈現方式。
在您的主題中創建文件layouts/_default/_markup/render-image.html
,內容如下:
<img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" loading="lazy" />
這將使生成的HTML具有loading="lazy"
屬性,從而實現圖片的懶加載。