一、图片懒加载的好处
- 对视图外的图片不进行加载，当页面的滚动时，对进入视图区的图片进行加载
减少 http 请求次数，节省流量，减小服务器压力 - 加载时 loading图 占位，加载失败 error图 占位，加载成功显示请求图片
提升用户体验
二、实现图片懒加载
1. 安装依赖（注意版本）
vue2 使用低版本，vue3 直接安装最新版本
npm i vue-lazyload@1.3.4 -S
2. 在 main.js 入口文件中注册
import VueLazyload from "vue-lazyload";
const loadimage = require("./assets/images/loading.gif");
const errorimage = require("./assets/images/error.gif");
Vue.use(VueLazyload, {
preLoad: 1, // 预加载高度比例，默认 1.3
error: errorimage, // 加载失败时图像的src
loading: loadimage, // 正在加载时图像的src
attempt: 1, // 尝试次数
});
3. 在组件中使用
<template>
<div class="home">
<h1>图片懒加载</h1>
<div v-for="(item, index) in list" :key="index">
<img v-lazy="item.src" style="height: 420px; width: 420px" alt="" />
</div>
</div>
</template>
<script>
export default {
name: "home",
data() {
return {
list: [
{
src: "https://img0.baidu.com/it/u=394333074,1787648005&fm=253&fmt=auto&app=138&f=JPEG?w=636&h=500",
},
{
src: "https://img2.baidu.com/it/u=683632201,378173214&fm=253&fmt=auto&app=138&f=JPG?w=1118&h=410",
},
{
src: "https://img1.baidu.com/it/u=945585991,3392397995&fm=253&fmt=auto&app=138&f=JPEG?w=605&h=500",
},
{
src: "https://img2.baidu.com/it/u=2751893563,239775612&fm=253&fmt=auto&app=138&f=PNG?w=622&h=500",
},
{
src: "https://img2.baidu.com/it/u=2933650591,4207845479&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=501",
},
],
};
},
};
</script>
