Skip to content
a vuepress plugin to better supporting image lazy loading
JavaScript Vue
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs docs: up data Dec 13, 2019
.gitignore first commit Sep 21, 2019
.npmignore first commit Sep 21, 2019
.travis.yml first commit Sep 21, 2019
ImgLazy.vue
LICENSE first commit Sep 21, 2019
README.md feat: add ImgLazy for theme Dec 12, 2019
enhanceAppFile.js first commit Sep 21, 2019
index.js first commit Sep 21, 2019
package.json feat: add ImgLazy for theme Dec 12, 2019

README.md

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

You can’t perform that action at this time.