一跑芳、圖片懶加載的好處
- 對視圖外的圖片不進行加載箱蟆，當頁面的滾動時，對進入視圖區(qū)的圖片進行加載
減少 http 請求次數(shù)怔檩，節(jié)省流量褪秀，減小服務(wù)器壓力 - 加載時 loading圖 占位，加載失敗 error圖 占位薛训，加載成功顯示請求圖片
提升用戶體驗
二溜歪、實現(xiàn)圖片懶加載
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, // 嘗試次數(shù)
});
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>
