Hexo-Theme-Butterfly 中多图库滚动加载异常问题分析

问题现象描述

在使用 Hexo-Theme-Butterfly 5.0.0 版本时，当文章中存在多个需要分页加载的图库(gallery)时，页面滚动会导致某些图库中的图片突然消失或出现。具体表现为：

1. 当两个图库先后出现，且每个图库的图片数量都超过单次加载数量时
2. 第二个图库中除最后一组外的其他图片组会出现随滚动位置变化而消失/重现的现象
3. 控制台无报错信息，构建过程也无异常

技术背景分析

Butterfly 主题使用 egjs-infinitegrid 库来实现图片的懒加载和虚拟滚动功能。该库的核心机制是：

1. 根据视口位置和元素尺寸计算可见区域
2. 动态加载可见区域内的元素
3. 移除视口外的元素以优化性能

问题根因探究

经过深入分析，该问题可能由以下因素共同导致：

1. 多实例冲突：当页面存在多个 infinitegrid 实例时，实例间的视口计算可能产生干扰
2. 尺寸计算时机：图片加载完成前后的尺寸变化可能导致布局重计算异常
3. 防抖机制影响：resizeDebounce 设置可能导致尺寸计算延迟，引发布局抖动

解决方案建议

临时解决方案

1. 关闭元素回收机制：设置 useRecycle: false

   • 优点：简单有效，避免元素被意外移除
   • 缺点：失去虚拟滚动的性能优化

2. 启用 ResizeObserver：设置 useResizeObserver: true

   • 优点：解决元素消失问题
   • 缺点：可能引入布局抖动

长期优化方向

1. 调整防抖时间：优化 resizeDebounce 参数
2. 实例隔离：确保每个 infinitegrid 实例独立计算
3. 加载策略优化：调整图片加载顺序和批次

最佳实践建议

对于博客场景，考虑到：

1. 单页图库数量通常有限
2. 图片总量不会造成明显性能问题
3. 用户体验平滑性优先

推荐配置：

useRecycle: false,
useResizeObserver: false,
resizeDebounce: 100

这种配置在大多数场景下能平衡性能和用户体验，避免出现元素消失或布局抖动的问题。