vue图片懒加载vue-lazyload

1.安装vue-lazyload

npm i vue-lazyload

2.在main.js中引入使用

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import VueLazyload from 'vue-lazyload' //引入
import ImgFail from "@/assets/img/img-fail.jpg"
import ImgLoad from "@/assets/img/load.gif"

createApp(App).use(VueLazyload, {
  preLoad: 1,//图片预加载高度比例
  error:ImgFail,//图片加载失败所使用的的图片
  loading: ImgLoad,//图片加载中使用图片
  attempt: 2,//尝试加载图片数量
}).mount('#app')

3.在组件中使用

   <img v-lazy="item" alt=""/>   //将img的src替换为v-lazy即可