Lazyload plugin for elements like img, video and iframe.
npm install hexo-lazyload-elementhexo-lazyload-element is a 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.
NPM
[![NPM downloads][npm-downloads]][npm-url]
1. Lazy load for img, video, and iframe
2. Support URL/Gradient/Blurhash for a custom placeholder image
3. Retry component embeded, for reloading when failed at loading image
4. Different syntaxes supported
5. Support for JavaScript-disabled browsers
``shell install dependency`
npm install hexo-lazyload-element -S
`yml _config.yml`
lazyload:
enable: true
# loadingImg: http://xxx.xxx.com/xxx.jpg, optional, default is https://i.loli.wiki/public/240207/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 true
`shell rebuild`
npm run clean && npm run build
All set, you're good to fly!
`markdown markdown image element`

Or
`markdown HTML img element`
#### video element
`markdown HTML video element`
#### iframe element
`markdown HTML iframe element`
#### no lazyload
no-lazy or $no-lazy in alt attribute.
`markdown no-lazy in [alt]`
!no-lazy
`markdown no-lazy with alt text`
!This is a image $no-lazy
Or
`markdown no-lazy attribute`
#### placeholder image
Supports \
Such as:
`css url`
https://abc.com/def.jpg`css gradient`
linear-gradient(to right, #ffa17f, #00223e)`css blurhash`
blurhash:Lb0V#qelf,flg+e-f6flg4g4f5fl
You can use my Img-Blurer to generate blury placeholder image.
Example:
$placeholder=...=placeholder in []
`markdown placeholder in [alt]`
!$placeholder=blurhash:Lb0V#qelf,flg+e-f6flg4g4f5fl=placeholder
Or use placeholderimg attribute
`markdown placeholderimg attribute`
#### aspect-ratio
Specifying aspect-ratio can prevent page reordering.
$aspect-ratio=...=aspect-ratio in []
`markdown aspect-ratio in [alt]`
!$aspect-ratio=3/2=aspect-ratio
Or use style
`markdown aspect-ratio in style`
Some RSS readers do not recognise content in , this script below can extract these contents without
`javascript format-rss.js
const fs = require("fs");
const feedXML = fs.readFileSync("public/feed.xml", "utf-8");
const format = (content) => {
return content.replace(/
fs.writeFileSync("public/feed.xml", format(feedXML));
`
`json package.json`
"scripts": {
...
"build": "hexo generate",
"format-rss": "node custom-scripts/format-rss.js",
},
`shell format-rss``
npm run build && npm run format-rss
[npm-url]: https://www.npmjs.com/package/hexo-lazyload-element
[npm-downloads]: http://img.shields.io/npm/dm/hexo-lazyload-element.svg?style=flat