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 lozad

base on markdown-it-img-lazy and markdown-it-imsize and lozad

Live Demo and Documentation

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 -->
<!-- or -->
<img data-src="img.jpg" loading="lazy" class="lazy">

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>

Options

useLoading

• Type: Boolben
• Default: true

Use the native image lazy-loading for the web

selector

• Type: string
• Default: lazy

Default class name for image