Vue-Lazyload

一款适于在应用中懒加载图片的vue插件，下面是一些值得注意的地方：

• 轻量、功能强大且易于使用
• 可作用于任意一种图片
• 在图片加载过程中添加加载样式
• 同时支持Vue 1.0和Vue 2.0

Demo

Demo

要求

• Vue.js 1.x 或者 2.x

安装

npm

$ npm install vue-lazyload

CDN

CDN: https://unpkg.com/vue-lazyload/vue-lazyload.js

<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script><script>  Vue.use(VueLazyload)  ...</script>

使用

main.js

import Vue from 'vue'import App from './App.vue'import VueLazyload from 'vue-lazyload'Vue.use(VueLazyload)// or with optionsVue.use(VueLazyload, {  preLoad: 1.3,  error: 'dist/error.png',  loading: 'dist/loading.gif',  attempt: 1})new Vue({  el: 'body',  components: {    App  }})

构造选项options

key description default options preLoad proportion of pre-loading height 1.3 Number error src of the image upon load fail 'data-src' String loading src of the image while loading 'data-src' String attempt attempts count 3 Number listenEvents events that you want vue listen for ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove'] Desired Listen Events adapter dynamically modify the attribute of element { } Element Adapter filter the image’s src filter { } Image url filter lazyComponent lazyload component false Lazy Component

想要监听的事件

通过传递给监听器事件的名字，你可以决定哪些事件可以触发懒加载。

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' ]})

Image url filter

动态的修改图片路径。

Vue.use(vueLazy, {    filter: {      webp ({ src }) {          const isCDN = /qiniudn.com/          if (isCDN.test(src)) {              src += '?imageView2/2/format/webp'          }          return src      },      someProcess ({ el, src }) {        if (el.getAttribute('large')) {          src += '?large'        }        return src      }    }})

Element Adapter

Vue.use(vueLazy, {    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')        }    }})

Lazy Component

<lazy-component @show="handler">  <img class="mini-cover" :src="img.src" width="100%" height="400"></lazy-component><script>  {    ...    methods: {      handler (component) {        console.log('this component is showing')      }    }  }</script>

执行

基础

vue-lazyload会将这个img元素的src设置为imgUrl字符串。

<script>export default {  data () {    return {      imgObj: {        src: 'http://xx.com/logo.png',        error: 'http://xx.com/error.png',        loading: 'http://xx.com/loading-spin.svg'     }     imgUrl: 'http://xx.com/logo.png' // String    }  }}</script><template>  <div ref="container">     <img v-lazy="imgUrl"/>     <div v-lazy:background-image="imgUrl"></div>     <!-- 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'" />  </div></template>

CSS state

在图片加载时，样式有三种状态，分别是loading、loaded和error

<img src="imgUrl" lazy="loading"><img src="imgUrl" lazy="loaded"><img src="imgUrl" lazy="error"><style>  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*/  }</style>

方法

事件钩子

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

• $on监听普通事件loading、loaded和error
• $once监听事件，但是只有一次
• $off移除监听器

参数

{string} event{Function} callback

例子

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

懒加载处理器

vm.$Lazyload.lazyLoadHandler

手动触发懒加载位置计算。

this.$Lazyload.lazyLoadHandler()

原文链接

https://github.com/HeliumLau/vue-lazyload/blob/master/README.md