JavaScript圖片懶加載的優(yōu)化方法詳解

更新時(shí)間：2022年03月28日 15:39:02 作者：故里有長安丶丶

這篇文章主要為大家詳細(xì)介紹了JavaScript圖片懶加載的優(yōu)化方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

一、方法一

在這里插入圖片描述

重點(diǎn)：

1.getBoundingClientRect().top > window.innerHeight 圖片未出現(xiàn)

2.getBoundingClientRect().top < window.innerHeight 圖片出現(xiàn)了

HTML：

<ul>
    ......
    <li>2222222222</li>
    <li>2222222222</li>
    <li>2222222222</li>
    <li>2222222222</li>
    <li>2222222222</li>
    <li>2222222222</li>
    /*先用data-自定義標(biāo)簽，使圖片先不加載*/
    <img data-src="./img1.jpg" height="200px"><br>
    <img data-src="./img2.jpg" height="200px" alt=""><br>
    <img data-src="./img3.jpg" height="200px" alt="">
</ul>

JavaScript:

let img = document.querySelectorAll('img')
window.addEventListener('scroll',() => {
	img.forEach((item) => {
		//若圖片頂部高度小于視窗高度
		if(item.getBoundingClientRect().top < window.innerHeight) {
			const data_src = item.getAttribute('data-src')
			//則將自定義屬性data-src賦值給src屬性
			item.setAttribute("src",data_src)
		} 
	})
	console.log("scroll觸發(fā)了");  //此方法：若加載很多內(nèi)容，就會(huì)導(dǎo)致任務(wù)的堆積，影響整體效率
})

請(qǐng)?zhí)砑訄D片描述

我們可以看到，雖然圖片懶加載已經(jīng)成功了，但是scroll事件仍在不斷觸發(fā)，非常消耗資源，因此目前最推薦使用的方法還是IntersectionObserver

二、方法二 InterSectionObserver

重點(diǎn)：

1.observer.observe(DOM節(jié)點(diǎn)) 觀察哪個(gè)DOM節(jié)點(diǎn)

2.observer.unobserve(DOM節(jié)點(diǎn)) 取消觀察某DOM節(jié)點(diǎn)

3.callback目標(biāo)能看見觸發(fā)一次；目標(biāo)元素看不見了又觸發(fā)一次

HTML如上

JavaScript:

let img = document.querySelectorAll('img')
//此回調(diào)：目標(biāo)能看見觸發(fā)一次；目標(biāo)元素看不見了又觸發(fā)一次
const callback = (entries) => {   //接收一個(gè)數(shù)組作為參數(shù)，數(shù)組每一項(xiàng)都和目標(biāo)元素相關(guān)，比如		isIntersecting判斷目標(biāo)元素是否被觀察到了，又比如target屬性代表該目標(biāo)元素
    entries.forEach((item) => {
        //若該目標(biāo)元素被觀察到了
        if(item.isIntersecting) {
            const img = item.target //目標(biāo)元素
            const data_src = img.getAttribute('data-src')
            img.setAttribute('src',data_src)
            observer.unobserve(img)  //observer.unobserve(DOM節(jié)點(diǎn))  取消觀察某DOM節(jié)點(diǎn)
        }
        console.log('觸發(fā)');
    })
}
const observer = new IntersectionObserver(callback)
//遍歷所有img，使得所有img被觀察
img.forEach((item) => {
    observer.observe(item)  //observer.observe(DOM節(jié)點(diǎn))  觀察哪個(gè)DOM節(jié)點(diǎn)
})

思路：

new一個(gè)觀察實(shí)例，并通過觀察實(shí)例身上的observe屬性觀察每一個(gè)圖片。定義callback回調(diào)函數(shù)，設(shè)置目標(biāo)圖片出現(xiàn)時(shí)改變屬性

請(qǐng)?zhí)砑訄D片描述