[Plugin] hexo-lazyload-element

[Plugin] hexo-lazyload-element

hexo-lazyload-element is a HEXO plugin for lazyloading elements in post. Implement lazyloading with Intersection Observer.

*for browsers not support Intersection Observer , lazy load is not woking due to I did not integrate polyfill in this plugin to avoid unnecessary script size.

DEMO LINK

demo screenshot

Features

  1. Lazy load for img, video, and iframe
  2. Support URL/Gradient/Blurhash for a customized placeholder image
  3. Retry component embeded, for reloading when failed at loading image
  4. Different syntaxes supported
  5. Support for JavaScript-disabled browsers
  6. *Support for RSS readers(extra script handling needed)

Install

install dependency
1
npm install hexo-lazyload-element -S

Usage

1. Enable lazyload in _config.yml

_config.yml
1
2
3
4
5
6
7
8
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 && Deploy

rebuild
1
npm run clean && npm run build

All set, you’re good to fly!

Syntax

elements

img element

markdown image element
1
![](https://abc.com/def.jpg)

Or

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

video element

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

iframe element

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

attributes

no lazyload

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

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

Or

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

placeholder image

Supports <url>/<gradient>/blurhash.

Such as:

url
1
https://abc.com/def.jpg
gradient
1
linear-gradient(to right, #ffa17f, #00223e)
blurhash
1
blurhash:Lb0V#qelf,flg+e-f6flg4g4f5fl

Example:

$placeholder=...=placeholder in []

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

Or use placeholderimg attribute

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

aspect-ratio

Specifying aspect-ratio can prevent page reordering.

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

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

Or use style

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

Script for RSS content

Some RSS readers do not recognise content in <noscript></noscript>, this script below can extract these <img> contents without <noscript> tag.

format-rss.js
1
2
3
4
5
6
7
8
9
10
11
12
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
1
2
3
4
5
"scripts": {
...
"build": "hexo generate",
"format-rss": "node custom-scripts/format-rss.js",
},
format-rss
1
npm run build && npm run format-rss

[Plugin] hexo-lazyload-element

https://thelynan.com/hexo-lazyload-element/

Author

Lynan

Posted on

2024-02-02

Licensed under

Comments