渲染列表 (六) -图片懒加载-逐渐加载图片-两种方式：单独安装vue-lazyload 插件 和 vant 提供的 Lazyload 组件

图片懒加载-逐渐加载图片-两种方式：单独安装vue-lazyload 插件 和 vant 提供的 Lazyload 组件

设置lazy-load属性来开启图片懒加载，需要搭配 Lazyload 组件使用

image图片组件-懒加载模式：https://youzan.github.io/vant/#/zh-CN/image#tu-pian-lan-jia-zai

lazyload图片懒加载：https://youzan.github.io/vant/#/zh-CN/lazyload

第一步：给图片标签 直接添加 lazy-load

• 使用组件属性 src/vies/home/index.vue

<van-image lazy-load></van-image>

• 第二步：需要依赖 v-lazy 指令，由谁提供：vue-lazyload 插件

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

• 第三步： 单独安装插件 https://github.com/hilongjw/vue-lazyload

npm i vue-lazyload

• 导入，注册 src/main.js中

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

补充：也可以使用 vant 提供的 Lazyload 组件

等效第三步： src/main.js中

// vant 默认导出 ，  Lazyload 指定导出
import vant, { Lazyload } from 'vant'
// Vue.use()  使用什么插件
Vue.use(Lazyload,{
  lazyComponent: true
})

• lazyComponent 可让组件懒加载