hexo-lazyload-element

hexo-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.

DEMO PAGE

NPM
[![NPM downloads][npm-downloads]][npm-url]

!demo screenshot

Features

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

Install

``shell install dependency npm install hexo-lazyload-element -S`

`Usage`

`$3`

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

`$3`

`shell rebuild npm run clean && npm run build`

All set, you're good to fly!

`Syntax`


$3

#### img element

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

`markdown HTML img element`

#### video element

`markdown HTML video element`

#### iframe element

`markdown HTML iframe element`

`$3`

#### 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 \/\/blurhash.

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.

!Img-Blurer

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`

`Script for RSS content`

Some RSS readers do not recognise content in , this script below can extract these contents without , this script below can extract these contents without