vue-lazyload

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 options
Vue.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