代码拉取完成,页面将自动刷新
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
yarn add vuepress-plugin-img-lazy
# or
npm i vuepress-plugin-img-lazy
module.exports = {
plugins: [
'img-lazy'
]
}
![img](/img.jpg)
# or
![img](/img.jpg =500x300) <!-- better -->
// enhanceAppFile.js
import ImgLazy from 'vuepress-plugin-img-lazy/ImgLazy'
export default ({ Vue }) => {
Vue.component(ImgLazy.name, ImgLazy)
}
import ImgLazy from 'vuepress-plugin-img-lazy/ImgLazy'
export default {
components: { ImgLazy }
}
<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" />
Boolben
true
false
Use the native image lazy-loading for the web
string
lazy
false
Default class name for image
String
200px
false
rootMargin for IntersectionObserver
string
Function
src => src && src.charAt(0) === '/' && !src.startsWith(ctx.base) ? ctx.base + src.slice(1) : src
false
Config prefix for src in images
<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">
display
as inline block
or block
separately), so as to ensure that the image can occupy the position it should occupy此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。