优化一下博客的图片加载
标题口气这么大，实际上只是优化了一下图片懒加载。
因为腾讯 CDN 免费策略收紧，我之前将博客移到了自己的服务器上并且没再上 CDN。
服务器带宽有点小水管，为了体验就开启了图片懒加载。
但是用了才发现，这懒加载问题还不少。
那光有肯定不够，还得想办法优啊。
我虽然不会前端，但是我有个万能的同事法爷呀！
于是我抓着法爷来帮我搞这个图片懒加载的优化……
2026.08.11 更新：更新最新信息。
2026.03.18 更新：更新图片处理工具。
2023.12.25 更新：修正 Fancybox 会处理占位图的问题。
那么都有什么问题呢？
其实在抓同事之前，我是在互联网里冲浪过的。
但是发现网络上我能找到的所有的图片懒加载项目，实现的需求都比较简单，处于一个有就行的阶段。
这些懒加载，都是使用同一张占位图，不可能总和加载完成后的图尺寸一样。
于是在图片加载完成后，页面布局就会发生抖动。
尤其是图片较多的博文中，经常会出现内容反卷或跳跃，十分影响体验。
此外，图片加载完成后的切换是直接切换，过于生硬，观感较差。
如果有一个过渡特效来切换，应该会让观感好上不少。
制定需求
为了解决上面发现的两个问题，我给法爷抛出了两个需求：
占位图尺寸要根据实际图片的长宽比例来决定。
图片加载完成后需要有一个过渡效果来切换。
第一个需求保证加载前后占位图和图片在页面上使用的空间一致，即在图片加载前就把位置提前空好了，这样最大限度避免加载完成后页面抖动的问题。
第二个我为了自己想要的效果，提出了不要统一的占位 Loading 图，而是每个图都生成一个体积很小的缩略图，用这个图进行占位并打上高斯模糊，等图片加载完成使用一个模糊逐渐变清晰的过渡效果切换过去。
法爷不愧是法爷，做起来那是挺快的。
但测试中又碰到一些预料外的问题，以及最初我的想法也并不是刚才上面那样，是后来逐渐完善才形成的，所以中间又有修修改改，整个时间跨度有了半年多。
成果公布
首先说明，我用的是 Fluid 主题，所以是直接以这个主题为基础进行修改的。
<2026.08.17 更新>
更新最新信息。
因改动较大涉及文件更多，这里就不展示具体文件内容了，访问地址：https://github.com/huaxianyan/CustomHexoFluid 可获得最新内容。
但是，这个改完之后想让懒加载正常工作，还是需要做一些额外的工作的。
使用方法
上面也说了，每个图片都要有自己的占位图，占位图的链接均为原图的链接在扩展名前加入 _proc 且格式均为 jpg。
为什么会这样呢？因为之前占位图都是自己手动用 JPEGView 修改的，修改后的文件名默认是这种格式。
后来觉得自己手动改的大小还是太保守了一点，还需要更小的体积，这时候再重新手动改一遍就太懒了，改不动。
<2026.03.18 更新>
更新图片处理工具。
请朋友搓了一个 图片处理工具，可以一键生成缩略图。
个人一般会把 缩略图最长边 设置为 17，觉得不满意可以多试试别的参数。
再偷懒一点
现在还有个问题，每次 Fluid 更新后我需要把修改过的文件手动再覆盖进去。
这个修改不具有普适性，也不好往 Fluid 那边提 PR。
于是想了想办法，用 GitHub Ation 来帮我自动处理，处理完后再发布个 Release，这样还有邮件提醒，不用隔三岔五去瞅 Fluid 那边更新了没。