前端vue3實(shí)現(xiàn)圖片懶加載的完整步驟記錄

更新時(shí)間：2025年06月24日 09:29:15 作者：夏霞.

在現(xiàn)代前端開發(fā)中懶加載是一種提高應(yīng)用性能和用戶體驗(yàn)的重要技術(shù),尤其是在處理較大圖片或長(zhǎng)列表數(shù)據(jù)時(shí),這篇文章主要介紹了前端vue3實(shí)現(xiàn)圖片懶加載的相關(guān)資料,需要的朋友可以參考下

場(chǎng)景和指令用法

場(chǎng)景:電商網(wǎng)站的首頁(yè)通常會(huì)很長(zhǎng)，用戶不一定能訪問到頁(yè)面靠下面的圖片，這類圖片通過懶加載優(yōu)化手段可以做到只有進(jìn)入視口區(qū)域才發(fā)送圖片請(qǐng)求

核心原理:圖片進(jìn)入視口才發(fā)送資源請(qǐng)求

首先：我們需要定義一個(gè)全局的指令，vue3官方的實(shí)現(xiàn)方法是這樣的

第一步:熟悉指令語(yǔ)法

并且：還需要用到一個(gè)鉤子函數(shù)

第二步：判斷圖片是否進(jìn)入視口

我們可以使用useIntersectionObserver這個(gè)函數(shù)

以下是官方示例的使用方法：

<script setup lang="ts">
import { useIntersectionObserver } from '@vueuse/core'

const { stop } = useIntersectionObserver(
  target,
  ([entry], observerElement) => {
    targetIsVisible.value = entry?.isIntersecting || false
  },
)
</script>

target:需要監(jiān)聽的元素

isIntersecting:是一個(gè)布爾值監(jiān)聽是否進(jìn)入可視區(qū)

以下是完整代碼實(shí)現(xiàn)

main.js

import { useIntersectionObserver } from '@vueuse/core'
const app = createApp(App)
// 定義全局指令
app.directive('img-lazy', {
  mounted(el, binding) {
    // el: 指令綁定的元素
    // binding: binding.value 指令的綁定值 圖片url
    console.log(el, binding.value);
    useIntersectionObserver(
        el, // 監(jiān)聽的元素
        ([{ isIntersecting }]) => { 
            // isIntersecting是一個(gè)布爾值 監(jiān)聽是否進(jìn)入可視區(qū)
            console.log(isIntersecting);       
            if (isIntersecting) {
                // 圖片進(jìn)入可視區(qū) 設(shè)置圖片的src
                el.src = binding.value
            }
        }
    )
  }
})

在需要懶加載的圖片標(biāo)簽里使用這個(gè)即可

<img v-img-lazy="item.picture"  alt="" />

頁(yè)面效果

由上圖可以看出在剛進(jìn)入頁(yè)面時(shí)需要懶加載的圖片沒有加載出來

由上圖可以看出當(dāng)頁(yè)面滑動(dòng)到人氣推薦時(shí)url全部都加載出來了

回顧核心步驟代碼

================================補(bǔ)檔優(yōu)化==================================

問題1:邏輯書寫位置不合理問:懶加載指令的邏輯直接寫到入口文件中，合理嗎?

答:不合理，入口文件通常只做一些初始化的事情，不該包含太多的邏輯代碼，可以通過插件的方法把懶加載指令封裝為插件，main.js入口文件只需要負(fù)責(zé)注冊(cè)插件即可

代碼實(shí)現(xiàn)：

插件代碼

// 定義懶加載指令
import { useIntersectionObserver } from '@vueuse/core'

export const lazyPlugin = {
    install(app) {
        app.directive('img-lazy', {
            mounted(el, binding) {
                // el: 指令綁定的元素
                // binding: binding.value 指令的綁定值 圖片url
                console.log(el, binding.value);
                useIntersectionObserver(
                    el, // 監(jiān)聽的元素
                    ([{ isIntersecting }]) => {
                        // isIntersecting是一個(gè)布爾值 監(jiān)聽是否進(jìn)入可視區(qū)
                        console.log(isIntersecting);
                        if (isIntersecting) {
                            // 圖片進(jìn)入可視區(qū) 設(shè)置圖片的src
                            el.src = binding.value
                        }
                    }
                )
            }
        })
    }
}

main.js

// 引入懶加載指令并且注冊(cè)
import { lazyPlugin } from '@/directives'
app.use(lazyPlugin)

問題2:重復(fù)監(jiān)聽問題uselntersectionObserver對(duì)于元素的監(jiān)聽是一直存在的，除非手動(dòng)停止監(jiān)聽，存在內(nèi)存浪費(fèi)
解決思路:在監(jiān)聽的圖片第一次完成加載之后就停止監(jiān)聽

代碼實(shí)現(xiàn)：

// 定義懶加載指令
import { useIntersectionObserver } from '@vueuse/core'

export const lazyPlugin = {
    install(app) {
        app.directive('img-lazy', {
            mounted(el, binding) {
                // el: 指令綁定的元素
                // binding: binding.value 指令的綁定值 圖片url
                console.log(el, binding.value);
               const {stop} =  useIntersectionObserver(
                    el, // 監(jiān)聽的元素
                    ([{ isIntersecting }]) => {
                        // isIntersecting是一個(gè)布爾值 監(jiān)聽是否進(jìn)入可視區(qū)
                        console.log(isIntersecting);
                        if (isIntersecting) {
                            // 圖片進(jìn)入可視區(qū) 設(shè)置圖片的src
                            el.src = binding.value
                            stop()
                        }
                    }
                )
            }
        })
    }
}