JavaScript圖片懶加載的優(yōu)化方法詳解
一、方法一
重點(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ù)的堆積,影響整體效率 })
我們可以看到,雖然圖片懶加載已經(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í)改變屬性
此時(shí)我們看到,當(dāng)所有圖片都懶加載完之后(observe取消觀察DOM節(jié)點(diǎn)),scroll事件就不再觸發(fā)*
總結(jié)
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容! 。
相關(guān)文章
textContent在Firefox下與innerText等效的屬性
textContent在Firefox下與innerText等效的屬性...2007-05-05javascript 構(gòu)建一個(gè)xmlhttp對象池合理創(chuàng)建和使用xmlhttp對象
在我的這篇舊文里曾經(jīng)發(fā)布了一個(gè)簡單的ajax操作類。我們發(fā)現(xiàn),在舊文里創(chuàng)建xmlhttp對象的時(shí)候,每次都要new一個(gè)對象。而我們都知道new一個(gè)對象的開銷是很大的。2010-01-01JavaScript實(shí)現(xiàn)多重繼承的方法分析
這篇文章主要介紹了JavaScript實(shí)現(xiàn)多重繼承的方法,結(jié)合實(shí)例形式詳細(xì)分析了javascript實(shí)現(xiàn)多重繼承的具體步驟與相關(guān)操作技巧,需要的朋友可以參考下2018-01-01使用JS簡單實(shí)現(xiàn)apply、call和bind方法的實(shí)例代碼
在JavaScript中,call、apply和bind是Function對象自帶的三個(gè)方法,這三個(gè)方法的主要作用是改變函數(shù)中的this指向,下面這篇文章主要給大家介紹了關(guān)于如何使用JS簡單實(shí)現(xiàn)apply、call和bind方法的相關(guān)資料,需要的朋友可以參考下2022-02-02javascript實(shí)現(xiàn)的右下角彈窗實(shí)例
這篇文章主要介紹了javascript實(shí)現(xiàn)的右下角彈窗,實(shí)例分析了javascript實(shí)現(xiàn)右下角彈窗的完整實(shí)現(xiàn)步驟與技巧,需要的朋友可以參考下2015-04-04