GitHub - jambonn/vue-lazyload: Vue module for lazy-loading images in your vue 3 applications. (original) (raw)

Vue-Lazyload

Vue module for lazyloading images in your Vue 3 applications. This module is base on vue-lazyload. Vue 1.x or 2.x please use vue-lazyload. Some of goals of this project worth noting include:

• Be lightweight, powerful and easy to use
• Work on any image type
• Add loading class while image is loading
• Supports Vue 3

Table of Contents

• Requirements
• Installation
• Usage
• Constructor Options
• Implementation
  • Basic
  • Css state
• Methods
  • Event hook
  • LazyLoadHandler
  • Performance
• Authors && Contributors
• License

Requirements

• Vue.js 3.x

Installation

npm

$ npm i @jambonn/vue-lazyload

yarn

$ yarn add @jambonn/vue-lazyload

CDN

CDN: https://unpkg.com/@jambonn/vue-lazyload/dist/vue-lazyload.umd.js

Usage

main.js:

import { createApp } from 'vue' import VueLazyload from '@jambonn/vue-lazyload' import App from './App.vue'

const app = createApp(App) app.use(VueLazyload)

// or with options const loadimage = require('./assets/loading.gif') const errorimage = require('./assets/error.gif') app.use(VueLazyload, { preLoad: 1.3, error: errorimage, loading: loadimage, attempt: 1 })

app.mount('#app')

template:

use v-lazy-container work with raw HTML

custom error and loading placeholder image

Constructor Options

Desired Listen Events

You can configure which events you want vue-lazyload by passing in an array of listener names.

const app = createApp(AttributeBindingApp) app.use(VueLazyload, { preLoad: 1.3, error: 'dist/error.png', loading: 'dist/loading.gif', attempt: 1, // the default is ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend'] listenEvents: [ 'scroll' ] })

This is useful if you are having trouble with this plugin resetting itself to loading when you have certain animations and transitions taking place

Image listener filter

dynamically modify the src of image

const app = createApp(AttributeBindingApp) app.use(VueLazyload, { filter: { progressive (listener, options) { const isCDN = /qiniudn.com/ if (isCDN.test(listener.src)) { listener.el.setAttribute('lazy-progressive', 'true') listener.loading = listener.src + '?imageView2/1/w/10/h/10' } }, webp (listener, options) { if (!options.supportWebp) return const isCDN = /qiniudn.com/ if (isCDN.test(listener.src)) { listener.src += '?imageView2/2/format/webp' } } } })

Element Adapter

const app = createApp(AttributeBindingApp) app.use(VueLazyload, { adapter: { loaded ({ bindType, el, naturalHeight, naturalWidth, $parent, src, loading, error, Init }) { // do something here // example for call LoadedHandler LoadedHandler(el) }, loading (listender, Init) { console.log('loading') }, error (listender, Init) { console.log('error') } } })

IntersectionObserver

use Intersection Observer to to improve performance of a large number of nodes.

const app = createApp(AttributeBindingApp) app.use(vueLazy, { // set observer to true observer: true,

// optional observerOptions: { rootMargin: '0px', threshold: 0.1 } })

Lazy Component

const app = createApp(AttributeBindingApp) app.use(VueLazyload, { lazyComponent: true });

<lazy-component @show="handler">

Use in list

Implementation

Basic

vue-lazyload will set this img element's src with imgUrl string

 <!-- with customer error and loading -->
 <img v-lazy="imgObj"/>
 <div v-lazy:background-image="imgObj"></div>

 <!-- Customer scrollable element -->
 <img v-lazy.container ="imgUrl"/>
 <div v-lazy:background-image.container="img"></div>

<!-- srcset -->
<img v-lazy="'img.400px.jpg'" data-srcset="img.400px.jpg 400w, img.800px.jpg 800w, img.1200px.jpg 1200w">
<img v-lazy="imgUrl" :data-srcset="imgUrl' + '?size=400 400w, ' + imgUrl + ' ?size=800 800w, ' + imgUrl +'/1200.jpg 1200w'" />

CSS state

There are three states while img loading

loading loaded error

Methods

Event Hook

import { getCurrentInstance, inject } from 'vue' export default { setup() { const internalInstance = getCurrentInstance().appContext.config.globalProperties const LazyLoad = internalInstance.$Lazyload // or const Lazyload = inject('Lazyload')

Lazyload.$on(event, callback)
Lazyload.$off(event, callback)
Lazyload.$once(event, callback)

} }

• $on Listen for a custom events loading, loaded, error
• $once Listen for a custom event, but only once. The listener will be removed once it triggers for the first time.
• $off Remove event listener(s).

Lazyload.$on

Arguments:

• {string} event
• {Function} callback

Example

Lazyload.$on('loaded', function ({ bindType, el, naturalHeight, naturalWidth, $parent, src, loading, error }, formCache) { console.log(el, src) })

Lazyload.$once

Arguments:

• {string} event
• {Function} callback

Example

Lazyload.$once('loaded', function ({ el, src }) { console.log(el, src) })

Lazyload.$off

If only the event is provided, remove all listeners for that event

Arguments:

• {string} event
• {Function} callback

Example

import { getCurrentInstance, inject } from 'vue' export default { setup() { const internalInstance = getCurrentInstance().appContext.config.globalProperties const LazyLoad = internalInstance.$Lazyload // or const Lazyload = inject('Lazyload')

const handler = ({ el, src }, formCache) => {
  console.log(el, src)
}
Lazyload.$on('loaded', handler)
Lazyload.$off('loaded', handler)
Lazyload.$off('loaded')

} }

LazyLoadHandler

Lazyload.lazyLoadHandler

Manually trigger lazy loading position calculation

Example

import { getCurrentInstance, inject } from 'vue' export default { setup() { const internalInstance = getCurrentInstance().appContext.config.globalProperties const LazyLoad = internalInstance.$Lazyload // or const Lazyload = inject('Lazyload')

Lazyload.lazyLoadHandler()

} }

Performance

import { getCurrentInstance, inject } from 'vue' export default { setup() { const internalInstance = getCurrentInstance().appContext.config.globalProperties const LazyLoad = internalInstance.$Lazyload // or const Lazyload = inject('Lazyload')

Lazyload.$on('loaded', function (listener) {
  console.table(Lazyload.performance())
})

} }

Dynamic switching pictures

Authors && Contributors

• hilongjw
• imcvampire
• darrynten
• biluochun
• whwnow
• Leopoldthecoder
• michalbcz
• blue0728
• JounQin
• llissery
• mega667
• RobinCK
• GallenHu
• Jambon

License

The MIT License