yin-shu / vue3-lazyload

A vue3.x image lazyload plugin

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

vue3-lazyload



A vue3.x image lazyload plugin.

πŸš€ Features

  • ⚑ 0 dependencies: No worry about your bundle size
  • 🦾 Type Strong: Written in Typescript
  • πŸ’ͺ Small Size: Only 4kb
  • 🌎 Browser support: Use it through CDN

πŸ“Ž Installation

$ npm i vue3-lazyload
# or
$ yarn add vue3-lazyload

🌎 CDN

CDN: https://unpkg.com/vue3-lazyload/dist/vue3-lazyload.min.js

<script src="https://unpkg.com/vue3-lazyload/dist/vue3-lazyload.min.js"></script>
<script>
  Vue.createApp(App).use(VueLazyLoad)
  ...
</script>

πŸ‘½ Usage

main.js:

import { createApp } from 'vue'
import App from './App.vue'
import VueLazyLoad from 'vue3-lazyload'

const app = createApp(App)
app.use(VueLazyLoad, {
  // options...
})
app.mount('#app')

App.vue:

<template>
  <img v-lazy="your image url" />
</template>

v-lazy use object params

<template>
  <img v-lazy="{ src: 'your image url', loading: 'your loading image url', error: 'your error image url' }" />
</template>

Use lifecycle

In main.js

import { createApp } from 'vue'
import App from './App.vue'
import VueLazyLoad from 'vue3-lazyload'

const app = createApp(App)
app.use(VueLazyLoad, {
  loading: () => {
    console.log('loading')
  },
  error: () => {
    console.log('error')
  },
  loaded: () => {
    console.log('loaded')
  }
})
app.mount('#app')

or

In xxx.vue

Have to be aware of is v-lazy don't use v-lazy="lazyOptions", in this case, vue cannot monitor data changes.

<template>
  <img v-lazy="{src: lazyOptions.src, lifecycle: lazyOptions.lifecycle}" width="100"> 
</template>

<script>
import { reactive } from 'vue'
export default {
  name: 'App',
  setup() {
    const lazyOptions = reactive({
      src: 'your image url',
      lifecycle: {
        loading: () => {
          console.log('image loading')
        },
        error: () => {
          console.log('image error')
        },
        loaded: () => {
          console.log('image loaded')
        }
      }
    })
    return {
      lazyOptions,
    }
  }
}
</script>

Use css state

There are three states while image loading.
You can take advantage of this feature, make different css controls for different states.

  • loading
  • loaded
  • error
<img src="..." lazy="loading">
<img src="..." lazy="loaded">
<img src="..." lazy="error">
<style>
  img[lazy=loading] {
    /*your style here*/
  }
  img[lazy=error] {
    /*your style here*/
  }
  img[lazy=loaded] {
    /*your style here*/
  }
</style>

πŸ“ Options

key description default type
loading The image used when the image is loaded - string
error The image used when the image failed to load - string
observerOptions IntersectionObserver options { rootMargin: '0px', threshold: 0.1 } IntersectionObserverInit
log Do not print debug info true boolean
lifecycle Specify state execution function - Lifecycle

β›± Lifecycle Hooks

key description
loading Image loading
loaded Image loaded
error Image load error

πŸ“„ TODO

  • Migrate to typescript
  • rollup
  • eslint
  • overall unit tests
  • *.d.ts
  • Perfect type
  • lifecycle
  • commitlint & husky
  • LazyComponent
  • LazyImage
  • LazyContainer
  • Perfect example

About

A vue3.x image lazyload plugin


Languages

Language:TypeScript 72.6%Language:JavaScript 19.2%Language:Vue 6.4%Language:HTML 1.8%