vue 基于vue-lazyload图片懒加载、延迟加载

vue-lazyload插件github地址：https://github.com/hilongjw/vue-lazyload#requirements

效果是默认不加载图片，先用一个占位符图来代替，等使用图片的时再进行加载（比如滚动到图片的时候），如果真正的图片请求出错了，用默认的出错图片来进行占位

一、安装插件

$ npm install vue-lazyload --save

二、配置

//main.js
import VueLazyload from 'vue-lazyload'
 
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: require('@/assets/img/dou_dou.jpg'),   //请求失败后显示的图片
  loading: require('@/assets/img/dou_dou.jpg'),   //加载的loading过渡图片
  attempt: 1     // 加载图片数量
})

具体配置api

20170525142423153.png

三、html/js

<template>
    <div>
        <ul id="container">
            <li v-for="img in list">
                <img v-lazy="img">
            </li>
        </ul>
    </div>
</template>
// 重点:把之前项目中img 标签里面的 :src 属性 改成 v-lazy

<script>
 export default {
    data () {
        return {
             list: [
                'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb',
                'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb',
                'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb',
                'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb',
                'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb',
                'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb',
                'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb',
            ]
        }
    }
 }
</script>

四、事件监听

可以通过传递数组来配置想要使用vue - lazyload的事件监听器的名字。

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