vue图片懒加载

Vue图片懒加载是一种优化页面性能的技术，它可以延迟加载页面上的图片，直到它们进入可见区域。这可以减少页面的加载时间，提高用户体验。

在Vue中实现图片懒加载可以使用第三方库vue-lazyload。首先需要安装该库：

npm install vue-lazyload --save

然后在项目中引入该库，并在Vue实例中添加以下代码：

import Vue from 'vue'
import VueLazyload from 'vue-lazyload'Vue.use(VueLazyload)

然后就可以在模板中使用v-lazy指令来延迟加载图片。例如：

<img v-lazy="image.src" alt="image description">

其中，image.src是需要加载的图片的路径。

除了v-lazy指令之外，vue-lazyload还提供了一些其他的选项和事件，可以根据需求进行配置和使用，例如：

<template><div><img v-lazy="image.src" v-lazy:background-image="image.src" v-lazy:throttle="200" v-lazy:preLoad="1.3"v-lazy:error="handleError" v-lazy:loading="handleLoading"alt="image description"></div>
</template><script>
import Vue from 'vue'
import VueLazyload from 'vue-lazyload'Vue.use(VueLazyload, {preLoad: 1.3,error: 'path/to/error.png',loading: 'path/to/loading.gif',attempt: 1,throttleWait: 200,listenEvents: [ 'scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove' ]
})export default {data () {return {image: {src: 'path/to/image.jpg',error: 'path/to/error.png',loading: 'path/to/loading.gif'}}},methods: {handleError () {console.log('error')},handleLoading () {console.log('loading')}}
}
</script>

在以上示例中，我们可以配置预加载、错误图片、加载中图片、尝试次数、节流等选项；同时，通过监听错误事件和加载事件，我们可以根据需求实现相应的处理逻辑。