vuepress-plugin-img-lazy
v1.0.4
Published
a vuepress plugin to better supporting image lazy loading
Downloads
434
Maintainers
Readme
vuepress-plugin-img-lazy
a vuepress plugin to better supporting image lazy loading
The plugin will preferentially use native image lazy-loading, if the browser does not support it, it will be implemented through IntersectionObserver
base on markdown-it-img-lazy and markdown-it-imsize
Installation
yarn add vuepress-plugin-img-lazy
# or
npm i vuepress-plugin-img-lazy
Usage
module.exports = {
plugins: [
'img-lazy'
]
}
![img](/img.jpg)
# or
![img](/img.jpg =500x300) <!-- better -->
Use in theme
- registered as global components
// enhanceAppFile.js
import ImgLazy from 'vuepress-plugin-img-lazy/ImgLazy'
export default ({ Vue }) => {
Vue.component(ImgLazy.name, ImgLazy)
}
- or registered as components
import ImgLazy from 'vuepress-plugin-img-lazy/ImgLazy'
export default {
components: { ImgLazy }
}
- use
<template>
<img-lazy src="/img.jpg" />
</template>
If you registered as global components, you can use it directly in the markdown
file
<img-lazy src="/img.jpg" />
Options
useNative
- Type:
Boolben
- 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
- Base URL already included by default, But it does not include the
<img/>
label in the markdown file
If you need to use both Base URL
and <img/>
labels, refer to
<img :data-src="$withBase('/img.png')" loading="lazy" class="lazy">
- 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
asinline block
orblock
separately), so as to ensure that the image can occupy the position it should occupy