日常的抓取工作當中，經?？吹骄W站為了減輕網頁加載所需資源對圖片等資源進行延遲加載。那什么樣的頁面需要用到延遲加載呢？比如我們打開一個圖片網站，一個頁面有很多圖片，這個時候我們就用的到延遲加載；比如我們寫一篇很長的技術博客的時候也需要配一些圖，這里也可以用到延遲加載。那什么是延遲加載呢？簡單的說是一種對網頁的性能優化，加載一個很多圖片的網頁不需要先把全部圖片加載出來，而是只加載可視區域的圖片即可，當滾動到需要顯示圖片的地方再發送圖片請求。

延遲加載

<img> 標簽有一個屬性是 src，用來表示圖像的 url，當這個屬性的值不為空時，瀏覽器就會根據這個值發送請求。如果沒有 src 屬性，就不會發送請求。我們可以利用這一個特征去實現延遲加載，先不設置 src 屬性，當需要圖片加載時將圖片真正的 url 取出放入 src 中。

HTML 和 CSS

.img-area{width: 500px;height: 500px; margin: 0 auto;}.my-photo{width:500px; height: 300px}

<div class="container">
 <div class="img-area"><img class="my-photo" alt="loading" data-src="./img/img1.jpg" /></div>
 <div class="img-area"><img class="my-photo" alt="loading" data-src="./img/img2.jpg" /></div>
 <div class="img-area"><img class="my-photo" alt="loading" data-src="./img/img3.jpg" /></div>
 <div class="img-area"><img class="my-photo" alt="loading" data-src="./img/img4.jpg" /></div>
 <div class="img-area"><img class="my-photo" alt="loading" data-src="./img/img5.jpg" /></div>
 <div class="img-area"><img class="my-photo" alt="loading" data-src="./img/img1.jpg" /></div>
 <div class="img-area"><img class="my-photo" alt="loading" data-src="./img/img2.jpg" /></div>
 <div class="img-area"><img class="my-photo" alt="loading" data-src="./img/img3.jpg" /></div>
 <div class="img-area"><img class="my-photo" alt="loading" data-src="./img/img4.jpg" /></div>
 <div class="img-area"><img class="my-photo" alt="loading" data-src="./img/img5.jpg" /></div> </div>

方法

1. getBoundingClientRect()

通過 getBoundingClientRect() 方法來獲取元素的大小以及位置

這個方法返回一個名為 ClientRect的 DOMRect對象，包含了 top、 right、 botton、 left、 width、 height 這些值。參考 mdn 上的圖：

可以看出返回的元素位置是相對于左上角而言的，而不是邊距。

什么情況下算進入可視區域呢？這里的 container.top 即表示圖片到可視區域頂部距離，window.innerHeight 來表示可視區域的高度。隨著滾動條的向下滾動，container.top 會越來越小，也就是圖片到可視區域頂部的距離越來越小，當 container.top===window.innerHeight 時，圖片的上沿應該是位于可視區域下沿的位置的臨界點。也就是說 container.top <=window.innerHeight 時，圖片是在可視區域內的。

簡單判斷一下：

// 偽代碼function check(container) { var container=... // 100是為了讓圖片提前加載，過渡更自然
 return container.top <=window.innerHeight + 100}

替換 src，

function loadImg(container) { if (!container.src) container.src=container.dataset.src
}

檢測圖片是否在可加載區域內：

function checkImg() { var imgs=Array.from(document.querySelectorAll('.my-photo'))
 imgs.forEach(container=> { if (check(container)) loadImg(container)
})
}

到此基本就可以實現一個簡單的圖片延遲加載，但是老鳥告訴我要注意頻繁滾動等于頻繁的DOM操作，這個時候有必要設置函數節流，具體操作請參考 ，函數節流

第二種方法：IntersectionObserver

可以參考阮一峰老師的 IntersectionObserver API 使用教程 ，這里講的深入淺出。

前端開發中經常遇到需要考慮某個元素何時進入視口容器，通常我們會選擇第一種方式來實現，監聽 scroll 事件， 調用 getBoundingClientRect() 方法，這種方法確實是不錯的方法，但是要考慮函數節流，這也是它的缺點，由于 scroll 事件頻繁觸發，容易造成性能問題。

這個新的 API 可以自動觀察元素是否在視口內，這就很強大了，讓我們看下怎么使用呢，

var io=new IntersectionObserver(callback, option);// 開始觀察io.observe(document.getElementById('example'));// 停止觀察io.unobserve(element);// 關閉觀察器io.disconnect();

callback參數是一個數組，每個數組都是一個 IntersectionObserverEntry 對象，我們來打印下

屬性說明引用 阮一峰老師的

time：可見性發生變化的時間，是一個高精度時間戳，單位為毫秒

target：被觀察的目標元素，是一個 DOM 節點對象

rootBounds：根元素的矩形區域的信息，getBoundingClientRect()方法的返回值，如果沒有根元素（即直接相對于視口滾動），則返回null

boundingClientRect：目標元素的矩形區域的信息

intersectionRect：目標元素與視口（或根元素）的交叉區域的信息

intersectionRatio：目標元素的可見比例，即intersectionRect占boundingClientRect的比例，完全可見時為1，完全不可見時小于等于0

這里最重要的屬性就是 intersectionRatio，通過該屬性判斷是否在可視區域內，當 intersectionRatio > 0 && intersectionRatio <=1 即在可視區域內。

我們通過 IntersectionObserver 這個API 就很方便了，

// IntersectionObserver 傳入 callbackvar io=new IntersectionObserver(ioes=> {
 ioes.forEach(ioe=> { var el=ioe.target
 var intersectionRatio=ioe.intersectionRatio
 console.log(intersectionRatio)
 if (intersectionRatio > 0 && intersectionRatio <=1) {
 loadImg(el)
 }
 el.onload=el.onerror=()=> io.unobserve(el)
 })
})function checkImg() { var imgs=Array.from(document.querySelectorAll('.my-photo'))
 imgs.forEach(item=> io.observe(item))
}function loadImg(el) { if (!el.src) {
 el.src=el.dataset.src
 }
}
checkImg()

效果如下

tml頁面設置動態金額滾動效果！

一開始加載頁面，數字都會過渡滾動到具體數字上！

代碼：

html:

css:

js: