图片懒加载插件

vue图片懒加载插件

为什么使用懒加载

可以想象一个网页打开有成百上千的图片需要加载，页面会变得非常的卡顿，此时如果只是可视区域的图片加载，其他的图片可以暂时有一个占位loading图，等滚动它们到可视区域时再去请求真实图片并且替换就好了。

vue-lazyload插件就是解决此类问题的。

安装

npm install vue-lazyload

引用

main.js

import vueLazy from 'vue-lazyload'
Vue.use(vueLazy, {
  preLoad: 1.3,//预加载的宽高
  error: '../assets/error.png', //img加载失败时现实的图片的路径
  loading: require('../static/imgs/ad3.png'),//img的加载中的显示的图片的路径
    //解释一下为什么是require('.....url'):因为vue自带webpack打包工具，如果是图片路径就会把他当成模块	解析，所以直接引入就好了。
	//记得把里面的路径换成自己的哦
  attempt: 1,//尝试加载的次数
  listenEvents:['mousewheel'], //你想让vue监听的事件
})

使用示例

只是将v-bind:src 修改为 v-lazy 绑定图片路径

<img v-lazy="imgsrc" >

index.vue

<template>
    <div>
        <img v-lazy="imgObj"/>
        <img v-lazy="imgUrl"/>
    </div>
</template>

<script>
export default {
  name: 'index',
  data () {
    return {
      imgObj: {
        src: require('https://images2015.cnblogs.com/blog/4849/201612/4849-20161223230947182-2121200217.png'),
        error: require('../assets/error.jpeg'),
        loading: require('../assets/loading.gif')
      },
      imgUrl: 'http://xx.com/logo.png'
    }
  }
}
</script>

<style scoped>
</style>