vue-lazyload 一个简单易用的 Vue 图片延迟加载插件

8,514 阅读1分钟

Vue-Lazyload

see demo: hilongjw.github.io/vue-lazyloa…

Vue module for lazyloading images in your applications. 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 both of Vue 1.0 and Vue 2.0

Requirements

  • Vue: ^1.0.0 or ^2.0.0

Install

From npm:

$ npm install vue-lazyload --save

Usage

//main.js

import Vue from 'vue'
import App from './App.vue'

// supports both of Vue 1.0 and Vue 2.0
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload)

// with options
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/error.png',
  loading: 'dist/loading.gif',
  attempt: 1
})

new Vue({
  el: 'body',
  components: {
    App
  }
})





API

Directive

Basic

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

data: {
  imgUrl: 'http://xx.com/logo.png' // String
}

or Object

data: {
  imgObj: {
    src: 'http://xx.com/logo.png',
    error: 'http://xx.com/error.png',
    loading: 'http://xx.com/loading-spin.svg'
  }
}

Elemet with background-image

Customer scrollable element

Options

params type detail
preLoad Number proportion of pre-loading height
error String error img src
loading String loading img src
attempt Number attempts count
listenEvents Array events that you want vue listen for. Desired Listen Events

CSS state


loading, loaded, error


  img[lazy=loading] {
    /*your style here*/
  }
  img[lazy=error] {
    /*your style here*/
  },
  img[lazy=loaded] {
    /*your style here*/
  }
  /*
  or background-image
  */
  .yourclass[lazy=loading] {
    /*your style here*/
  }
  .yourclass[lazy=error] {
    /*your style here*/
  },
  .yourclass[lazy=loaded] {
    /*your style here*/
  }


Instance Methods

vm.$Lazyload.$on(event, callback)

Arguments:

  • {string} event
  • {Function} callback

Example

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

vm.$Lazyload.$once(event, callback)

Listen for a custom event, but only once. The listener will be removed once it triggers for the first time.

Arguments:

  • {string} event
  • {Function} callback

Example

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

vm.$Lazyload.$off(event, callback)

Remove event listener(s).

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

Arguments:

  • {string} event
  • {Function} callback

Example

function handler ({ el, src }) {
  console.log(el, src)
} 
vm.$Lazyload.$on('loaded', handler)
vm.$Lazyload.$off('loaded', handler)

Desired Listen Events

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

Vue.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 url Filter

Vue.use(vueLazy, {
    preLoad: 1.3,
    error: 'dist/404.png',
    loading: 'dist/loading-spin.svg',
    adapter: {
        loaded (listender, Init) {
            console.log('loaded')
        },
        loading (listender, Init) {
            console.log('loading')
        },
        error (listender, Init) {
            console.log('error')
        }
    },
    filter: {
        webp ({ src }) {
            const isCDN = /qiniudn.com/
            if (isCDN.test(src)) {
                src += '?imageView2/2/format/webp'
            }
            return src
        }
    }
})

Element Adapter

Vue.use(vueLazy, {
    preLoad: 1.3,
    error: 'dist/404.png',
    loading: 'dist/loading-spin.svg',
    adapter: {
        loaded ({ bindType, el, naturalHeight, naturalWidth, $parent, src, loading, error, Init }) {
            // do something here
            console.log('loaded')
        },
        loading (listender, Init) {
            console.log('loading')
        },
        error (listender, Init) {
            console.log('error')
        }
    }
})

Authors && Contributors

License

The MIT License