写了一个 HEXO lazyload 插件

[lynan]

NPM

DEMO LINK

特性

1. img/video/iframe 元素懒加载
2. 配置元素忽略懒加载（添加 no-lazy attribute ）
3. 支持使用 URL/CSS 渐变/Blurhash 作为占位图片
4. 内置重试组件，在图片加载失败时可以点击“重试”按钮重新加载
5. 支持多种语法
6. 禁用 JavaScript 时会 fallback 到不使用懒加载的逻辑
7. * RSS 阅读器支持（需要使用额外的脚本处理 XML 文件）

---

2023 年发了两篇游记在我的博客里，分享一些旅行的体验，自己也可以回味旅行的乐趣。

两篇游记都附带了很多高清图片、视频，导致了很多不必要的加载，页面性能也受到比较大的影响。

1. 川西旅行
2. 关西旅行

经过懒加载优化以后，页面体验比较之前有非常大的提升。有需要的朋友可以试一试这款插件。

[hckisme]

很好，不错👍
但是 hexo 很多主题已经自带了图片懒加载，可以直接配置

[Rache1]

看了楼主的旅行帖子，想出去玩了

[Ettup]

用上了，感谢楼主。

不过好像有个小问题，多张图片时，中间的间隔消失了，然后会发生两张图片重叠的情况，导致图片显示不完全，如 [朝鲜行记]( https://zhfyi.com/post/52134) 这篇文章，不知道要怎么解决？还有就是当最后一张是图片底下是脚注时，脚注也会消失，不会显示。

[lynan]

@Ettup 谢谢支持 ！我看了一下是因为 style.css 中

```article .article-excerpt img, article .article-content img, article .featured-media img {
display: block;
max-width: 100%;
height: auto;
margin: 1rem auto;
}```

的 height 和 margin 导致的，我来兼容一下

[lynan]

@Ettup 已更新修复，感谢反馈