图片懒加载(Lazy Loading)是一种延迟加载图片的技术,它只有在图片即将进入浏览器可视区域时才加载图片,从而减少页面初始加载时间和提高页面加载性能。
图片懒加载的作用和好处如下:
提高页面加载速度:只有当图片即将显示在用户的屏幕上时才加载图片,可以减少页面初始加载时间和提高页面加载性能。
减轻服务器压力:只有在需要加载图片时才向服务器请求图片,可以减轻服务器的负载,提高网站的可用性。
节省带宽:只有在需要加载图片时才向用户发送图片数据,可以节省带宽和流量,降低用户的网络费用。
改善用户体验:用户不必等待所有图片加载完成才能看到页面内容,可以提高用户的满意度和用户体验。
总之,图片懒加载可以提高网站性能和用户体验,是一种非常有用的网页开发技术。
vue3中使用图片懒加载可以引用一款插件vue3-lazy
1、vue3 安装 vue-lazy
安装命令:npm install vue3-lazy -S
2、在main.js里面全局注册
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).use(lazyPlugin, {loading: require('@/assets/images/default.png'), // 图片加载时默认图片error: require('@/assets/default.png') // 图片加载失败时默认图片// 还可以有其他配置
})
3、template中使用
<div id="app"><img v-lazy="../xxx.png">
</div>
******----注意:v-lazy不需要冒号 :v-lazy是错误的