# hexo-lazyload-element

> Lazyload plugin for elements like img, video and iframe.

Latest version **1.0.30** (published 2024-08-15) · ISC license · 0 weekly downloads

## Install

```sh
npm install hexo-lazyload-element
pnpm add hexo-lazyload-element
yarn add hexo-lazyload-element
bun add hexo-lazyload-element
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.30 |
| Published | 2024-08-15 |
| First published | 2024-02-02 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 29.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Lynan |
| Maintainers | lynanbreeze |
| Keywords | hexo, hexo plugin, image lazyload, video lazyload, iframe lazyload |

## Links

- npm: https://www.npmjs.com/package/hexo-lazyload-element
- Repository: https://github.com/LynanBreeze/hexo-lazyload-element
- Homepage: https://github.com/LynanBreeze/hexo-lazyload-element#readme
- Issues: https://github.com/LynanBreeze/hexo-lazyload-element/issues
- npm.io page: https://npm.io/package/hexo-lazyload-element

## Dependencies (1)

- [uglify-js](https://npm.io/package/uglify-js.md) ^3.0.27

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 1.0.30 (latest) — 2024-08-15
- 1.0.29 — 2024-08-15
- 1.0.28 — 2024-08-15
- 1.0.27 — 2024-02-29
- 1.0.26 — 2024-02-26
- 1.0.25 — 2024-02-25
- 1.0.24 — 2024-02-21
- 1.0.23 — 2024-02-14
- 1.0.22 — 2024-02-11
- 1.0.21 — 2024-02-11
- 1.0.20 — 2024-02-11
- 1.0.19 — 2024-02-11
- 1.0.18 — 2024-02-11
- 1.0.17 — 2024-02-09
- 1.0.16 — 2024-02-07
- … 16 more at https://npm.io/package/hexo-lazyload-element/versions

## README

## 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](https://lynanbreeze.github.io/hexo-lazyload-element/)**

**[NPM](https://www.npmjs.com/package/hexo-lazyload-element)** 
[![NPM downloads][npm-downloads]][npm-url]

![demo screenshot](https://i.imgur.com/QwlUMb2.gif)

## Features

1. Lazy load for img, video, and iframe
2. Support [URL](https://developer.mozilla.org/en-US/docs/Web/CSS/url)/[Gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient)/[Blurhash](https://blurha.sh/) 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

### 1. Enable lazyload in `_config.yml`

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

### 2. Rebuild && Deploy

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

All set, you're good to fly!

## Syntax
### elements
#### **img element**

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

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

#### **video element**

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

#### **iframe element**

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

### attributes

#### no lazyload

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

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

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

Or

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

#### placeholder image

Supports \<url\>/\<gradient\>/[blurhash](https://blurha.sh/).

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](https://lynanbreeze.github.io/image-blurrer/) to generate blury placeholder image.

![Img-Blurer](https://raw.githubusercontent.com/LynanBreeze/image-blurrer/main/public/img/image-blurrer.jpg)

**Example:**

`$placeholder=...=placeholder` in `[]`

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

Or use `placeholderimg` attribute

```markdown 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 `[]`

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

Or use `style`

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

```javascript 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));

```

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

## Credit
This plugin is inspired by https://github.com/Troy-Yang/hexo-lazyload-image.

## License
MIT

[npm-url]: https://www.npmjs.com/package/hexo-lazyload-element
[npm-downloads]: http://img.shields.io/npm/dm/hexo-lazyload-element.svg?style=flat

---
_Source: https://npm.io/package/hexo-lazyload-element · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._