Hugo 优化：为图片添加正在加载动画

一直以来都想在图片加载时添加一个加载动画，以增强用户体验。使用 Hugo 以来，关于图片的添加方式也进行了自定义。针对历史数据，没功夫一遍遍改了，就采用 Markdown 原生语法进行图片的插入，这样形成的图片就是一行一个简单进行罗列。后来为了让自己的照片显示 exif 信息，以及实现一行多图的方式，通过自定义短代码的方式实现，详细可见 通过Hugo短代码功能实现图片及其EXIF信息展示 。 因此，本站加入图片的方式除了 Markdown 语法以外，还有 figure 和 figure-group 短代码的方式进行插入。此外，还有近期做的足迹地图里面的坐标卡片中，也有图片，当然已经在 Github 中实现了卡片内图片加载动画效果。在这次 Hugo 的优化中，也一并将对应的效果应用进来。 文章图片加载动画 文章图片放大加载动画 足迹地图卡片加载动画 目标场景 我的博客中有两种主要的图片展示场景： 文章页面：Markdown 图片、figure 短代码、figure-group 图片组 足迹地图：地图卡片中的缩略图、点击缩略图后的全屏查看 实现方式 1. HTML 层：添加懒加载属性 对于 Markdown 图片，使用 Hugo 的 Render Hook 自动添加 loading="lazy" 属性： {{- $src := .Destination | safeURL -}} {{- $alt := .Text -}} {{- $title := .Title -}} <img src="{{ $src }}" alt="{{ $alt }}" {{- with $title }} title="{{ . }}"{{ end }} loading="lazy"> 剩余 3 行代码 展开剩余代码 位置：layouts/_default/_markup/render-image.html