作者：麥樂
來源：恒生LIGHT云社區(qū)
圖像延遲加載
想要得到更好的性能體驗，只靠資源壓縮與恰當?shù)奈募袷竭x型，是很難滿足期望的。我們還需要針對資源加載過程進行優(yōu)化。
什么是延遲加載？
下圖是京東商城的手機端首頁，當元素沒有滑動到視線內(nèi)時，圖片src屬性放置了一個很小的圖片，init_src屬性放置了真正的圖片，只要當該元素滑動到視線內(nèi)部，才會將init_src屬性賦值給src去加載真實的圖片，這就是一個簡單的圖片延遲加載的過程。
傳統(tǒng)方式延遲加載
就是事件監(jiān)聽的方式，通過監(jiān)聽scroll事件與resize事件，并在事件的回調(diào)函數(shù)中去判斷，需要進行延遲加載的圖片是否進入視窗區(qū)域。
我們只需要關(guān)注三個屬性。
加入頁面中有多張這樣的圖片需要加載。具體的Javascript實現(xiàn)邏輯如下，在文檔的DOMContentLoaded事件中，添加延遲加載處理邏輯，首先獲取class屬性名為lazy的所有〈img〉標簽，將這些標簽暫存在一個名為lazyImages的數(shù)組中，表示需要進行延遲加載但還未加載的圖片集合。當一個圖片被加載后，便將其從lazyImages數(shù)組中移除，直到lazyImages數(shù)組為空時，表示所有待延遲加載的圖片均已經(jīng)加載完成，此時便可將頁面滾動事件移除。
這里使用了getBoundingClientRect（）函數(shù)獲取元素的相對位置.
rectObject = object.getBoundingClientRect();rectObject.top：元素上邊到視窗上邊的距離;
rectObject.right：元素右邊到視窗左邊的距離;
rectObject.bottom：元素下邊到視窗上邊的距離;
rectObject.left：元素左邊到視窗左邊的距離;
對于只可上下滾動的頁面，判斷一個圖片元素是否出現(xiàn)在屏幕視窗中的方法其實顯而易見，即當元素上邊緣距屏幕視窗頂部的top值小于整個視窗的高度window.innerHeight時，預加載的事件處理代碼如下：
document.addEventListener(DOMContentLoaded, function() { const imags = [].slice.call(document.querySelector('.lazy')) const active = false; // 限制函數(shù)被頻繁調(diào)動 function load() { if(active === false) { active = true setTimeout(() => { imags.forEach((img) => { const objPos = img.getBoundingClientRect(); if(objPos.top <= window.innerHeight && objPos.bottom >=0 && img.display !== 'done') { img.src = img.dataset.src; img.classList.remove('lazy') imags.filter((i) => (i !== img)) if(imags.length === 0) { document.removeEventListener('scroll', load) window.removeEventListener('resize', load) window.removeEventListener('orientationchange', load) } } }) active = false }, 200) } } document.addEventListener('scroll', load) window.addEventListener('resize', load) window.addEventListener('orientationchange', load) })這種方式的有點就是兼容性比較好，缺點是頻繁地進行計算必然會影響性能，代碼也會比較繁瑣。
實現(xiàn)圖片的延遲加載：Intersection Observer方式
現(xiàn)代瀏覽器已大多支持了Intersection Observer API，用一句話簡述：每當因頁面滾動或窗口尺寸發(fā)生變化，使得目標元素（target）與設(shè)備視窗或其他指定元素產(chǎn)生交集時，便會觸發(fā)通過Intersection Observer API配置的回調(diào)函數(shù)，在該回調(diào)函數(shù)中進行延遲加載的邏輯處理，會比傳統(tǒng)方式顯得更加簡潔而高效。
簡單來說，目標元素的可見性變化時，就會調(diào)用觀察器的回調(diào)函數(shù) callback。
callback一般會觸發(fā)兩次。一次是目標元素剛剛進入視口（開始可見），另一次是完全離開視口（開始不可見）。
document.addEventListener(DOMContentLoaded, function() { const imags = [].slice.call(document.querySelector('.lazy')) if(window.IntersectionObserver && window.IntersectionObserverEntry && window.IntersectionObserverEntry.prototype.intersectionRatio) { var lazyImgObserver = new IntersectionObserver((entries, observer) => { entries.forEach((entry)=> { if(entry.isIntersecting) { var lazyImg = entry.target; lazyImg.src = lazyImg.dataset.src; lazyImg.classList.remove('lazy'); lazyImgObserver.unobserve(lazyImg) } }) }) imags.forEach((img) => { lazyImgObserver.observe(img) }) } })這種方式判斷元素是否出現(xiàn)在視窗中更為簡單直觀，應在實際開發(fā)中盡量使用，但其問題是并非所有瀏覽器都能兼容。
（1）做好盡量完備瀏覽器兼容性檢查，對于兼容Intersection Observer API的瀏覽器，采用這種方式進行處理，而對于不兼容的瀏覽器，則切換回傳統(tǒng)的實現(xiàn)方式進行處理。 （2）使用相應兼容的polyfill插件，在W3C官方GitHub賬號下就有提供。
實現(xiàn)圖片的延遲加載：CSS類名方式
這種實現(xiàn)方式通過CSS的background-image屬性來加載圖片，與判斷〈img〉標簽src屬性是否有要請求圖片的URL不同，CSS中圖片加載的行為建立在瀏覽器對文檔分析基礎(chǔ)之上。
document.addEventListener(DOMContentLoaded, function() { const imags = [].slice.call(document.querySelector('.lazy')) if(window.IntersectionObserver && window.IntersectionObserverEntry && window.IntersectionObserverEntry.prototype.intersectionRatio) { var lazyImgObserver = new IntersectionObserver((entries, observer) => { entries.forEach((entry)=> { if(entry.isIntersecting) { var lazyImg = entry.target; lazyImg.classList.add('visible'); lazyImgObserver.unobserve(lazyImg) } }) }) imags.forEach((img) => { lazyImgObserver.observe(img) }) } })這種方式限制于需要提前寫好css樣式。
原生的延遲加載支持
除了上述通過開發(fā)者手動實現(xiàn)延遲加載邏輯的方式，從Chrome 75版本開始，已經(jīng)可以通過〈img〉和〈iframe〉標簽的loading屬性原生支持延遲加載了，loading屬性包含以下三種取值。
● lazy：進行延遲加載。 ● eager：立即加載。 ● auto：瀏覽器自行決定是否進行延遲加載。
測試：image標簽就是 img
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>document</title> <!-- <script src=nnzzn/skin/m04blueskin/image/nopic.gif --> <!-- <script src=nnzzn/skin/m04blueskin/image/nopic.gif --> <!-- <link rel="stylesheet" href="css/index.css"> --> <style> img { width: 700px; height: 200px; display: block; } </style></head><body> <imgage loading="lazy" src=nnzzn/skin/m04blueskin/image/nopic.gif alt="photo" /> <imgage loading="lazy" src=nnzzn/skin/m04blueskin/image/nopic.gif alt="photo" /> <imgage loading="lazy" src=nnzzn/skin/m04blueskin/image/nopic.gif alt="photo" /> <imgage loading="lazy" src=nnzzn/skin/m04blueskin/image/nopic.gif alt="photo" /> <imgage loading="lazy" src=nnzzn/skin/m04blueskin/image/nopic.gif alt="photo" /> <imgage loading="lazy" src=nnzzn/skin/m04blueskin/image/nopic.gif alt="photo" /> <imgage loading="lazy" src=nnzzn/skin/m04blueskin/image/nopic.gif alt="photo" /> <imgage loading="lazy" src=nnzzn/skin/m04blueskin/image/nopic.gif alt="photo" /> <imgage loading="lazy" src=nnzzn/skin/m04blueskin/image/nopic.gif alt="photo" /> <imgage loading="lazy" src=nnzzn/skin/m04blueskin/image/nopic.gif alt="photo" /> <imgage loading="lazy" src=nnzzn/skin/m04blueskin/image/nopic.gif alt="photo" /> <imgage loading="lazy" src=nnzzn/skin/m04blueskin/image/nopic.gif alt="photo" /> <imgage loading="lazy" src=nnzzn/skin/m04blueskin/image/nopic.gif alt="photo" /> <imgage loading="lazy" src=nnzzn/skin/m04blueskin/image/nopic.gif alt="photo" /> <imgage loading="lazy" src=nnzzn/skin/m04blueskin/image/nopic.gif alt="photo" /> <imgage loading="lazy" src=nnzzn/skin/m04blueskin/image/nopic.gif alt="photo" /> <imgage loading="lazy" src=nnzzn/skin/m04blueskin/image/nopic.gif alt="photo" /> <imgage loading="lazy" src=nnzzn/skin/m04blueskin/image/nopic.gif alt="photo" /> <imgage loading="lazy" src=nnzzn/skin/m04blueskin/image/nopic.gif alt="photo" /> <imgage loading="lazy" src=nnzzn/skin/m04blueskin/image/nopic.gif alt="photo" /> <imgage loading="lazy" src=nnzzn/skin/m04blueskin/image/nopic.gif alt="photo" /> <imgage loading="lazy" src=nnzzn/skin/m04blueskin/image/nopic.gif alt="photo" /> <imgage loading="lazy" src=nnzzn/skin/m04blueskin/image/nopic.gif alt="photo" /> <imgage loading="lazy" src=nnzzn/skin/m04blueskin/image/nopic.gif alt="photo" /> <imgage loading="lazy" src=nnzzn/skin/m04blueskin/image/nopic.gif alt="photo" /> <imgage loading="lazy" src=nnzzn/skin/m04blueskin/image/nopic.gif alt="photo" /> <imgage loading="lazy" src=nnzzn/skin/m04blueskin/image/nopic.gif alt="photo" /> <imgage loading="lazy" src=nnzzn/skin/m04blueskin/image/nopic.gif alt="photo" /> <imgage loading="lazy" src=nnzzn/skin/m04blueskin/image/nopic.gif alt="photo" /><imgage loading="lazy" src=nnzzn/skin/m04blueskin/image/nopic.gif alt="photo" /></body></html>可以看到，首次加載的個數(shù)是13個，首屏一般只能放下4個左右，13個以后的img滾動到視線內(nèi)部會自動去加載。
實踐發(fā)現(xiàn)有以下幾個特點：
- Lazy loading加載數(shù)量與屏幕高度有關(guān)，高度越小加載數(shù)量越少，但并不是線性關(guān)系。
- Lazy loading加載數(shù)量與網(wǎng)速有關(guān)，網(wǎng)速越慢，加載數(shù)量越多，但并不是線性關(guān)系。
- Lazy loading加載沒有緩沖，滾動即會觸發(fā)新的圖片資源加載。
- Lazy loading加載在窗口resize尺寸變化時候也會觸發(fā)，例如屏幕高度從小變大的時候。
- Lazy loading加載也有可能會先加載后面的圖片資源，例如頁面加載時滾動高度很高的時候。
與Javascript有關(guān)的幾個行為特征：
- 判斷瀏覽器是否支持原生loading，最好使用'loading' in XXX判斷。
- 獲取loading屬性值可以直接img.loading；
- 原生loading不可寫，不可訪問例如HTMLImageElement.prototype.loading會報錯Illegal invocation。
- 如果要使用，注意做兼容性處理。
