具體細節以及更多拓展可前往npm官網查看：

https://www.npmjs.com/package/vue-lazyload

Github了解源碼：https://github.com/hilongjw/vue-lazyload

懶加載顧名思義就是懶得加載（…吧），當我們瀏覽網頁，文檔展示在電腦窗口的一部分會加載出圖片，眼睛看不到的部分就不會加載。當窗口聚焦到文檔，圖片就會加載。這就是懶加載。此方法有效的降低了服務器的請求壓力，大大提高了客戶的訪問速度。

那么如何實現：

對圖片標簽<img/>的 src 屬性下手，src就是請求圖片地址的，所以懶加載把src屬性直接替換為 v-lazy 屬性。

首先創建完工程后
安裝vue-lazyload組件包

npm i vue-lazyload@1.2.3 -S

這里不建議用最新版，會報錯，圖片加載不出來（我暫時遇到的bug）

下載好后就可以在main.js配置組件注冊組件

import Vue from 'vue' import App from './App.vue' import router from './router' // 1.圖片懶加載插件 import VueLazyload from 'vue-lazyload'Vue.config.productionTip = false // 2.注冊插件 Vue.use(VueLazyload, {preLoad: 1.3,// 懶加載默認加載圖片loading: 'https://img1.imgtp.com/2022/10/02/61x2dHvC.png',// 加載失敗后加載的圖片error: 'https://img1.imgtp.com/2022/10/02/61x2dHvC.png',attempt: 1// the default is ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend']// listenEvents: [ 'scroll' ] })new Vue({router,render: h => h(App) }).$mount('#app')

注冊組件里面的具體參數配置可前往官網獲取：

接著就可以隨意使用圖片懶加載了
例如，img添加v-lazy屬性，值就是圖片url

<template><div class="hello"><h3>{{ msg }}</h3><div v-for="item in imgSrc" :key="item.id"><p>內容區域</p><p>內容區域</p><p>內容區域</p><p>內容區域</p><img alt="" v-lazy=item.url /></div></div> </template><script> export default {name: "HelloWorld",props: {msg: String,},data() {return {imgSrc: [{ id: 1, url: "https://img1.imgtp.com/2022/10/02/x2zOdyMi.png" },{ id: 2, url: "https://img1.imgtp.com/2022/10/02/6OcEDlzP.png" },{ id: 3, url: "https://img1.imgtp.com/2022/10/02/PCii39ly.png" },],};}, }; </script>

這里我給了三張圖片，用v-for遍歷了出來。3G下查看效果：

總結

以上是生活随笔為你收集整理的Vue之图片懒加载vue-lazyload的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。