引言

一篇文章可能包含文字內(nèi)容與插圖，當進入一篇文章的網(wǎng)頁時img默認會立即記載圖片，而我們希望沒瀏覽到圖片位置時不要加載圖片，節(jié)約性能。那就要用到圖片懶加載。

圖片懶加載

• 首先創(chuàng)建指令

在main.js中

• 自定義指令的使用

<template>
<p>狗</p>
<p>狗</p>
<p>狗</p>
<p>狗</p>
<div v-for="item in imgs" :key="item.id">
    <img v-lazy :src="item.src">
</div>
</template>
<script setup>
import {ref} from 'vue'
const imgs = ref([
    {id:1,src:"https://img2.baidu.com/it/u=748323254,2144431882&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500"},
    {id:2,src:"https://img2.pconline.com.cn/pconline/0706/07/1031072_070611dog10.jpg"},
    {id:3,src:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw%2F8cb77051-a424-4b25-b339-41de6550d56f%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1695276380&t=d7e8035571fa912ae25277aba92f61ff"}
])
</script>

<style scoped>
p{
    height: 100px;
}
img{
    height: 200px;
    width: 200px;
    object-fit: contain;
}
</style>

• 懶加載詳情

export default{
    mounted(el){
        const imgSrc = el.src
        el.src = ''
        const observer = new IntersectionObserver(([{isIntersecting}])=>{
            //元素出現(xiàn)在可視區(qū)域 或 離開可視區(qū)域 觸發(fā)
            if(isIntersecting){
                //加載圖片
                el.src = imgSrc
                //停止觀察
                observer.unobserve(el)
            }
        })

        observer.observe(el)
    }
}

1、 此處的指令應用于img，所以這里el就特指img。
2、 掛載完成后先將img的src保存，然后置空img的src不讓其加載資源。
3、 利用IntersectionObserver實現(xiàn)監(jiān)聽，這里解構(gòu)出isIntersecting屬性用于判斷元素是否進入可視區(qū)域。
4、 當圖片加載完成后停止監(jiān)聽。