Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tolking/vuepress-plugin-img-lazy
a vuepress plugin to better supporting image lazy loading
https://github.com/tolking/vuepress-plugin-img-lazy
img lazy lazy-loading vuepress vuepress-plugin
Last synced: about 2 months ago
JSON representation
a vuepress plugin to better supporting image lazy loading
- Host: GitHub
- URL: https://github.com/tolking/vuepress-plugin-img-lazy
- Owner: tolking
- License: mit
- Created: 2019-09-21T07:49:38.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-12-05T07:57:12.000Z (about 4 years ago)
- Last Synced: 2024-09-19T23:29:38.430Z (3 months ago)
- Topics: img, lazy, lazy-loading, vuepress, vuepress-plugin
- Language: JavaScript
- Homepage: https://tolking.github.io/vuepress-plugin-img-lazy/preview.html
- Size: 732 KB
- Stars: 22
- Watchers: 3
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vuepress-plugin-img-lazy
> a vuepress plugin to better supporting image lazy loading
**The plugin will preferentially use native image [lazy-loading](https://caniuse.com/#feat=loading-lazy-attr), if the browser does not support it, it will be implemented through [IntersectionObserver](https://caniuse.com/#feat=intersectionobserver)**
base on [markdown-it-img-lazy](https://github.com/tolking/markdown-it-img-lazy) and [markdown-it-imsize](https://github.com/tatsy/markdown-it-imsize)
[Live Demo and Documentation](https://tolking.github.io/vuepress-plugin-img-lazy/preview.html)
---
## Installation
``` sh
yarn add vuepress-plugin-img-lazy
# or
npm i vuepress-plugin-img-lazy
```
## Usage
``` js
module.exports = {
plugins: [
'img-lazy'
]
}
```
``` md
# or
```
## Use in theme
- registered as global components
``` js
// enhanceAppFile.js
import ImgLazy from 'vuepress-plugin-img-lazy/ImgLazy'
export default ({ Vue }) => {
Vue.component(ImgLazy.name, ImgLazy)
}
```
- or registered as components
``` js
import ImgLazy from 'vuepress-plugin-img-lazy/ImgLazy'
export default {
components: { ImgLazy }
}
```
- use
``` vue
```
**If you registered as global components, you can use it directly in the `markdown` file**
``` md
```
## Options
### useNative
- Type: `Boolean`
- Default: `true`
- Required: `false`
Use the native image lazy-loading for the web
### selector
- Type: `string`
- Default: `lazy`
- Required: `false`
Default class name for image
### rootMargin
- Type: `String`
- Default: `200px`
- Required: `false`
rootMargin for IntersectionObserver
### prefix
- Type: `string` `Function`
- Default: `src => src && src.charAt(0) === '/' && !src.startsWith(ctx.base) ? ctx.base + src.slice(1) : src`
- Required: `false`
Config prefix for src in images
## Other
1. [Base URL](https://vuepress.vuejs.org/guide/assets.html#rBase%20URL) already included by default, But it does not include the `![]()
` label in the markdown file
If you need to use both `Base URL` and `![]()
` labels, refer to
``` md
![]()
```
2. In order to better supporting image lazy loading, it is better to specify the size of the image (in some themes, you need to set `display` as `inline block` or `block` separately), so as to ensure that the image can occupy the position it should occupy