图片懒加载旨在当用户浏览页面时,图片进入视图才开始加载,避免了大量图片并发请求,造成资源浪费
使用vue-lazyload插件:
npm istanll vue-lazyload
在main.js中引入:
import VueLazyLoad from "vue-lazyload";
const app = createApp(App);
app.use(VueLazyLoad, {
error: "/images/error.svg", // 加载错误的图片
loading: "/images/loading3.gif", // 加载时的图片
});
然后将img标签的src属性切换为v-lazy即可生效,效果如下:
当图片进入视图时才开始加载,如果加载失败会显示你设置的 error 图片,该方法适用与vue项目,非常简单便捷