vue怎么实现图片懒加载

Vue可以使用vue-lazyload插件实现图片懒加载。

1. 安装vue-lazyload插件

npm install vue-lazyload --save

2. 在Vue中引入vue-lazyload

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

3. 在模板中使用

<img v-lazy="imgUrl" />

其中，imgUrl是需要懒加载的图片地址，v-lazy是指令，告诉Vue对该图片进行懒加载。

4. 可以设置占位图

<img v-lazy="imgUrl" src="placeholder.png" />

当图片还未加载完成时，会先显示占位图。

5. 可以设置懒加载的方式

<img v-lazy="imgUrl" lazy="loaded" />

其中，lazy属性的值可以是loaded或者scroll。loaded表示在图片加载完成后才显示，scroll表示在图片进入可视区域时显示。

6. 可以设置懒加载的阈值

<img v-lazy="imgUrl" lazy="scroll" :threshold="100" />

其中，:threshold表示图片距离可视区域多少像素时开始加载。默认值为200。