Hexo-Theme-Butterfly 相册加载优化指南

在Hexo主题Butterfly中，相册功能是一个广受欢迎的特性。本文主要探讨如何优化相册的图片加载行为，特别是针对首次加载数量和"加载更多"时的增量设置。

相册加载机制解析

Butterfly主题的相册功能默认采用分页加载机制，其核心逻辑如下：

1. 首次加载：默认显示前10张图片
2. 增量加载：点击"加载更多"按钮时，每次额外加载10张图片
3. 滚动加载：当用户滚动到页面底部时，也会触发自动加载更多图片

这种机制虽然能提高页面初始加载速度，但对于某些特定场景可能不够灵活。例如，当相册中包含大量高质量图片时，10张的加载量可能导致频繁触发加载操作，影响用户体验。

自定义加载参数

通过修改主题代码，我们可以实现更灵活的加载控制。主要涉及以下两个参数：

1. 首次加载数量：控制页面初始显示的图片数量
2. 增量加载数量：控制每次点击"加载更多"时新增的图片数量

修改方法是在主题的main.js文件中调整相关变量：

const firstLoad = 3;  // 首次加载3张图片
const increment = 5;  // 每次增量加载5张图片

实现原理详解

相册加载功能基于InfiniteGrid.JustifiedInfiniteGrid实现，主要逻辑包括：

1. 分组计算：根据总图片数和加载参数计算需要的分组数量
2. 加载触发：通过事件监听实现滚动加载和按钮点击加载
3. 布局更新：每次加载完成后重新计算瀑布流布局

关键函数appendItem负责处理图片加载逻辑，它接收两个参数：当前组号和加载数量。修改时需要注意保持相关计算的一致性。

注意事项

1. 修改代码前建议备份原文件
2. 主题更新时可能需要重新应用这些修改
3. 加载数量设置应考虑服务器性能和用户网络状况
4. 过小的加载量可能导致频繁请求，过大的加载量可能影响首屏性能

通过合理调整这些参数，可以在页面性能和用户体验之间取得平衡，特别是对于包含大量高质量图片的相册场景。