vue 图片懒加载

图片懒加载是一种优化网页性能的技术，它能够延迟加载页面中的图片，直到它们进入用户的视野范围内。这种技术可以减少页面的加载时间，同时也可以减少服务器负载，提高网站的性能和用户体验。

在 Vue 中，可以使用 vue-lazyload 插件来实现图片懒加载。首先需要安装该插件：

npm install vue-lazyload --save

然后在项目的入口文件中引入该插件，并配置选项：

import Vue from 'vue'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {
  preLoad: 1.3, // 预加载的高度比例
  error: 'https://dummyimage.com/200x200/000/fff.png&text=Error', // 加载失败时显示的图片
  loading: 'https://dummyimage.com/200x200/000/fff.png&text=Loading', // 加载中时显示的图片
  attempt: 1 // 加载图片的尝试次数
})

接下来，在需要进行懒加载的图片元素上添加 v-lazy 指令即可：

<img v-lazy="'https://dummyimage.com/200x200/000/fff.png&text=Lazy+Loaded+Image'">

这样就可以实现图片懒加载了。当用户将页面滚动到图片的位置时，图片才会开始加载。如果加载成功，图片就会显示出来；如果加载失败，就会显示配置的错误图片。如果图片过大或加载失败，插件会自动进行尝试加载，并在多次尝试后放弃加载。