Vue3 图片懒加

懒加载作用

假设你一个页面有100张图片
电脑屏幕可见区域就那么大的地方(假设不滚动只能看到20张)
反正不可能一次看到100张，如果一次性加载100张，特别耗费资源
而且加载完100张，你可能只看了显示器区域的20张图，而没有去滚动下拉查看另外80张
这不是浪费资源吗，而懒加载就是解决这个问题
其通过js计算图片是否出现在屏幕中来决定是否加载图片

安装vue3-lazy

由于vue-lazyload 只兼容vue1.x 和 vue2.x
这里使用vue3-lazy

npm install vue3-lazy --save-dev

在vue中注册

main.js

import {createApp} from 'vue'
import App from './App.vue'
import {createWebHistory} from 'vue-router'
import createRouter from "./router"
import createHttp from "@/http";
# 引入 vue3-lazy
import vueLazyLoad from "vue3-lazy"

const router = createRouter(createWebHistory())
const vueApp = createApp(App)
vueApp.config.globalProperties.$axios = createHttp()

# 通过use注册
# loading: 加载中动画
# error: 加载失败后的图片
vueApp.use(vueLazyLoad, {
    loading: require('./assets/audio.svg'),
    error: require('./assets/error.png'),
})
vueApp.use(router).mount('#app')

vue中使用

# 没有使用懒加载之前是这么写的
<img src='http://xxx.com/a.png'>

# 使用懒加载可以这么写
# 需要单引号 因为v-lazy是指令
<img v-lazy="'http://xxx.com/a.png'">