浅谈vue-lazyload实现的详细过程

import 'VueLazyload' from 'vue-lazyload'Vue.use(VueLazyload,{   preload:1.3,//预加载的宽高   loading:"img的加载中的显示的图片的路径",   error:"img加载失败时现实的图片的路径",   attempt:3,//尝试加载的次数   listenEvents:['scroll','wheel','mousewheel','resize','animationend','transitionend','touchmove'], //你想让vue监听的事件})

<img v-lazy="img.src"/>

 data(){  return {   img:{     src:"图片的真是路径"        }      }    }

//main.js// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'import $ from 'jquery'import 'assets/bootstrap/css/bootstrap.min.css'import 'assets/bootstrap/js/bootstrap.min'import router from '@/router/index'import VueLazyload from 'vue-lazyload'Vue.use(VueLazyload,{  preload:1.3,  loading:require('../static/imgs/ad3.png'),//解释一下为什么是require('.....url'):因为vue自带webpack打包工具，如果是图片路径就会把他当成模块解析，所以直接引入就好了。//记得把里面的路径换成自己的哦  listenEvents:['mousewheel'],})//载入vue-router//import Vue from 'vue'/* eslint-disable no-new */new Vue({ el: '#app', router, template: '<App/>', components: { App }})//app.vue<template> <div id="app">  <navbar></navbar>  <router-view></router-view>  <hello></hello> <ul>  <li v-for="item in imgUrl">   <img v-lazy="item.src" alt="" width="300" height="150"/>  </li> </ul> <img v-lazy='img[0].src'/> </div></template><script>  import hello from './components/Hello'  import Navbar from '@/components/navBar'  import route from '@/components/route'export default { name: 'app', components:{  hello,  Navbar }, data() {  return {   imgUrl: [    {src: require('@/assets/imgs/ad1.png')},//记得把里面的路径换成自己的哦    {src: require('@/assets/imgs/ad1.png')},//记得把里面的路径换成自己的哦   ],   img:[    {src:require('@/assets/imgs/ad2.png')}//记得把里面的路径换成自己的哦   ]  } }}</script><style>#app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px;} </style>