写了一个 HEXO lazyload 插件

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 612 天前的主题，其中的信息可能已经有所发展或是发生改变。

NPM

DEMO LINK

特性

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

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

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

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

重试

旅行

游记

插件

5 条回复 2024-02-07 10:29:02 +08:00

hckisme

2024-02-05 17:04:59 +08:00

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

Rache1

2024-02-05 17:38:22 +08:00

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

Ettup

2024-02-06 20:45:40 +08:00

用上了，感谢楼主。

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

lynan

2024-02-06 21:23:47 +08:00

@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

2024-02-07 10:29:02 +08:00

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