目錄

• 了解
• 代碼
• 效果

了解

圖片懶加載是一種網(wǎng)頁性能優(yōu)化的方法，能夠極大的提升用戶的體驗效果，現(xiàn)代一張圖片都有可能是幾兆的問題，加入100張圖片你進(jìn)入頁面難道就直接全部請求，這得要多卡，所以使用圖片懶加載的形式，只請求可視區(qū)域的圖片鏈接資源，這樣能夠大幅度減少請求次數(shù)從而做到體驗優(yōu)化。

還有一種說法就是圖片不直接進(jìn)行展示，而是在請求途中通過一個 loading 的加載圖片進(jìn)行等待，并最終直接讓圖片直接完全展示，不用等待緩慢的一步步展示。

---

代碼

// window.innerHeight 獲取視口顯示區(qū)域的高度// Element.getBoundingClientRect() 元素的大小及其相對于視口的位置let images = document.querySelectorAll('img')window.addEventListener('scroll', e => {images.forEach(img => {let imgTap = img.getBoundingClientRect().topif(imgTap < window.innerHeight) { // 證明該圖片在視口區(qū)域let dataSrc = img.getAttribute('data-src')img.setAttribute('src',dataSrc)console.log('圖片加載')}})})

以上的方法實現(xiàn)了圖片的 lazyload 效果，但是每次滑動頻繁的性能消耗不太雅觀，是需要我們自己手動去進(jìn)行個判斷來停止頻繁的性能消耗。

---

效果

通過 IntersectionObserver API 實現(xiàn)完整的效果
該方法效果很明顯，操作簡潔上手

// IntersectionObserver接口 (從屬于Intersection Observer API) 提供了一種異步觀察目標(biāo)元素與其祖先元素或頂級文檔視窗(viewport)交叉狀態(tài)的方法。祖先元素與視窗(viewport)被稱為根(root)。// IntersectionObserver 的disconnect()方法終止對所有目標(biāo)元素可見性變化的觀察。 // IntersectionObserver 對象的observe() 方法向IntersectionObserver對象監(jiān)聽的目標(biāo)集合添加一個元素。一個監(jiān)聽者有一組閾值和一個根， 但是可以監(jiān)視多個目標(biāo)元素，以查看這些目標(biāo)元素可見區(qū)域的變化。調(diào)用IntersectionObserver.unobserve()方法可以停止觀察元素。 // IntersectionObserver的unobserve() 方法命令I(lǐng)ntersectionObserver停止對一個元素的觀察。 // 基于視口對于元素進(jìn)行觀察監(jiān)視,let images = document.querySelectorAll('img')let ob = new IntersectionObserver(arg => {arg.forEach(item => {console.log(item)if (item.isIntersecting) { // isIntersecting: true 可以理解為是否已監(jiān)視let img = item.targetlet data_src = img.getAttribute('data-src')img.setAttribute('src', data_src)ob.unobserve(img) // 關(guān)閉監(jiān)視console.log('觀察完畢');}})})images.forEach(img => {ob.observe(img) // 將這些 img 作為監(jiān)視對象})

---

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。