[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

npm install hexo-lazyload-element -S

Usage

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 && Deploy

rebuild

npm run clean && npm run build

All set, you’re good to fly!

Syntax

elements

img element

markdown image element

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

Or

HTML img element

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

video element

HTML video element

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

iframe element

HTML iframe element

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

attributes

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)

Or

no-lazy attribute

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

placeholder image

Supports <url>/<gradient>/blurhash.

Such as:

url

https://abc.com/def.jpg

gradient

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

blurhash

blurhash:Lb0V#qelf,flg+e-f6flg4g4f5fl

Example:

$placeholder=...=placeholder in []

placeholder in [alt]

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

Or use placeholderimg attribute

placeholderimg attribute

<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]

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

Or use style

aspect-ratio in style

<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

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