背景

圖片懶加載是針對圖片加載時機的一種優(yōu)化，在一些圖片量比較大的網(wǎng)站（比如電商網(wǎng)站首頁，或者團購網(wǎng)站、小游戲首頁等），如果我們嘗試在用戶打開頁面的時候，就把所有的圖片資源加載完畢，那么很可能會造成白屏、卡頓等現(xiàn)象，因為圖片真的太多了，一口氣處理這么多任務(wù)，瀏覽器做不到啊！

懶加載是為了讓瀏覽器只加載可視區(qū)內(nèi)的圖片，可視區(qū)外的大量圖片不進行加載，當(dāng)頁面滾動到后面去的時候再進行加載。這樣做有很多好處可以增加首屏加載的速度，畢竟，用戶點開頁面的瞬間，呈現(xiàn)給他的只是首屏，我們只要把首屏的資源圖片加載處理就可以了，至于下面的圖片，當(dāng)用戶下滑當(dāng)當(dāng)前位置的時候，在加載出來也是沒問題的，對于性能壓力也小了，用戶體驗也沒有變差。

解答

圖片懶加載的原理就是需要知道圖片是否在可視區(qū)內(nèi)了，當(dāng)圖片到達可視區(qū)內(nèi)就需要去請求對應(yīng)的圖片加載出來

頁面中的img標(biāo)簽一般如下寫

<img class="lazyload" src="placeholder.jpg" data-src="real_image.jpg" />

其中src首先賦值一個占位的圖片，一般是一個很小的圖片，進行占位，src是實際需要展示的圖片，原理就是當(dāng)圖片在可視區(qū)內(nèi)的時候?qū)rc的圖片選渲染出來即可。

1、原生實現(xiàn)

Chrome 76 將原生支持圖片的惰性加載，支持對img和iframe進行延遲加載，只需要將loading屬性設(shè)置為lazy即可。

<img src="celebration.jpg" loading="lazy" alt="..." /> <iframe src="video-player.html" loading="lazy"></iframe>

原生實現(xiàn)的好處是，不需要任何腳本，純原生HTML即可，簡單方便，支持多種屬性

• lazy：對資源進行延遲加載。
• eager：立即加載資源。
• auto：瀏覽器自行判斷決定是否延遲加載資源。

原生的壞處就是在于瀏覽器的支持率不是很高，將來肯定是非常好的。

我們知道由于瀏覽器的支持率不是很好，上面的方案固然很好，但是使用的并不是很多，所以下面介紹幾種更加常見的懶加載方案。

2、Element.getBoundingClientRect()

getBoundingClientRect返回值是一個 DOMRect 對象，這個對象是由該元素的 getClientRects() 方法返回的一組矩形的集合, 即：是與該元素相關(guān)的CSS 邊框集合 。DOMRect 對象包含了一組用于描述邊框的只讀屬性——left、top、right和bottom，單位為像素。除了 width 和 height 外的屬性都是相對于視口的左上角位置而言的。

有了這個API后我們很同意獲取圖片的top值，當(dāng)top值小于可視區(qū)的高度的時候就可以任何圖片進入了可視區(qū)，直接加載圖片即可

element.getBoundingClientRect().top < document.documentElement.clientHeight

由于需要在滾動的時候去監(jiān)聽圖片的位置，所以我們需要使用到window.onscroll事件，我們在事件內(nèi)部處理相關(guān)的邏輯即可。

3、通過相對計算獲取元素位置

通過document.documentElement.clientHeight獲取屏幕可視窗口高度。

通過element.offsetTop獲取元素相對于文檔頂部的距離。

通過document.documentElement.scrollTop獲取瀏覽器窗口頂部與文檔頂部之間的距離，也就是滾動條滾動的距離。 然后判斷2-3<1是否成立，如果成立，元素就在可視區(qū)域內(nèi)。

element.offsetTop - document.documentElement.scrollTop < document.documentElement.clientHeight

此方法也需要在滾動的時候去監(jiān)聽圖片的位置，所以我們需要使用到window.onscroll事件，我們在事件內(nèi)部處理相關(guān)的邏輯即可。

4、使用IntersectionObserver

const observer = new IntersectionObserver(callback, observerConfig)const imgList = document.querySelectorAll(".lazyload"); const observer = new IntersectionObserver(entries => {entries.forEach(item => {if (item.isIntersecting) {item.target.src = item.target.dataset.origin; // 判斷在可視區(qū)了，把data-origin的值放到srcobserver.unobserve(item.target); // 已經(jīng)加載過的圖片停止進行監(jiān)聽}}); }); imgList.forEach(item => observer.observe(item));

補充

1、優(yōu)化

由于上面某些情況是需要使用到window.scroll事件的，所以我們可以增加節(jié)流來減少事件處理函數(shù)的調(diào)用次數(shù)。 假設(shè)我們判斷是否可視區(qū)邏輯為函數(shù)loadImage那么我們可以如下處理。

window.onscroll = throttle(loadImage, 500)

2、拓展

上面后續(xù)三種方法不僅僅可以使用在圖片的懶加載上面，其實所有可以懶加載的地方都可以通過這種方式進行判斷，比如列表分頁加載，我們可以通過這種方式進行判斷是否需要進行下一頁的加載，比如我們需要埋曝光埋點的時候，可以通過這種方法判斷元素是否曝光，進行埋點事件的觸發(fā)。

總結(jié)

以上是生活随笔為你收集整理的document引用图片的src属性能干嘛_如何实现图片懒加载的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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