[HEXO插件] hexo-lazyload-element

hexo-lazyload-element 是一个用于延迟加载帖子元素的 HEXO 插件。使用 Intersection Observer 实现延迟加载。

对于不支持 Intersection Observer 的浏览器，延迟加载不起作用，因为我没有在此插件中集成 polyfill 以避免不必要的脚本大小。

DEMO LINK

DEMO 截图

特性

1. 延迟加载 img、video 和 iframe
2. 支持 URL/Gradient/Blurhash 自定义占位符图像
3. 重试嵌入组件，用于在加载图像失败时重新加载
4. 支持不同的语法
5. 支持禁用 JavaScript 的浏览器
6. *支持 RSS 阅读器（需要额外的脚本处理）

安装

install dependency

npm install hexo-lazyload-element -S

使用

1. Enable lazyload in _config.yml

_config.yml

lazyload:
  enable: true
  # loadingImg: http://xxx.xxx.com/xxx.jpg, optional, default is https://i.loli.wiki/public/240201/loading.svg
  # intersectionRatio: 0.33 # optional, default is 0.25
  # placeholderRatio: 1.5 # optional, default is 1.5 (3/2)
  # showTransition: false # optional, default is true
  # errorTipImage: http://xxx.xxx.com/xxx.jpg # optional, default is https://i.loli.wiki/public/240201/error-tip.svg
  # showAltText: true # optional, default is false

2. 重新构建 && 部署

rebuild

npm run clean && npm run build

一切准备就绪！

语法

元素

图片元素

markdown image element

![](https://abc.com/def.jpg)

或者

HTML img element

<img src="https://abc.com/def.jpg" alt="def">

视频元素

HTML video element

<video src="https://abc.com/def.mp4">

iframe

HTML iframe element

<iframe src="htttps://baidu.com"></iframe>

属性

no lazyload

no-lazy or $no-lazy in alt attribute.

no-lazy in [alt]

![no-lazy](https://abc.com/def.jpg)

no-lazy with alt text

![This is a image $no-lazy](https://abc.com/def.jpg)

或者

no-lazy attribute

<img no-lazy src="https://abc.com/def.jpg" alt="def">

占位图片

支持 <url>/<gradient>/blurhash.

例如:

url

https://abc.com/def.jpg

gradient

linear-gradient(to right, #ffa17f, #00223e)

blurhash

blurhash:Lb0V#qelf,flg+e-f6flg4g4f5fl

例子:

$placeholder=...=placeholder in []

placeholder in [alt]

![$placeholder=blurhash:Lb0V#qelf,flg+e-f6flg4g4f5fl=placeholder](https://pic.imgdb.cn/item/65558655c458853aef97be96.jpg)

或者使用 placeholderimg 属性

placeholderimg attribute

<img src="https://pic.imgdb.cn/item/65558655c458853aef97be96.jpg" data-placeholderimg="blurhash:Lb0V#qelf,flg+e-f6flg4g4f5fl">

aspect-ratio

指定纵横比可以防止页面重新排序带来的抖动。

$aspect-ratio=...=aspect-ratio in []

aspect-ratio in [alt]

![$aspect-ratio=3/2=aspect-ratio](https://pic.imgdb.cn/item/65558655c458853aef97be96.jpg)

或者使用 style

aspect-ratio in style

<img src="https://pic.imgdb.cn/item/65558655c458853aef97be96.jpg" style="aspect-ratio: 3/2">

RSS 内容脚本

有些 RSS 阅读器无法识别 <noscript></noscript> 中的内容，下面的脚本可以在没有 <noscript> 标签的情况下提取这些 <img> 内容。

format-rss.js

const fs = require("fs");

const feedXML = fs.readFileSync("public/feed.xml", "utf-8");

const format = (content) => {
  return content.replace(/<noscript>(<img.*?)<\/noscript>/g, (str, p1) => {
    return p1;
  })
};

fs.writeFileSync("public/feed.xml", format(feedXML));

package.json

"scripts": {
    ...
    "build": "hexo generate",
    "format-rss": "node custom-scripts/format-rss.js",
  },

format-rss

npm run build && npm run format-rss