判斷元素是否在可視區域

前言

圖片懶加載在網站運用圖片比較多的時候回用到，圖片懶加載能夠讓不在可視區域的圖片不去加載，避免一次性加載過多圖片致使請求阻塞，提升網站加載速度和用戶體驗。若是要實現圖片懶加載須要去判斷圖片是否在可視區域。

判斷方法

判斷一個元素是否在可視區域，咱們有一般有兩種辦法，第一種是：使用元素的 getBoundingClientRect 屬性的 top 值和頁面的 clientHeight進行對比, 若是top的值小於 clientHeight表示元素在可視區域內。這種方式的缺點是須要監聽scroll事件，第二種是利用高級特性 Intersection Observer 來判斷元素是否可見，這種方式不用監聽scroll事件，元素可見變調用回調，在回調裏面處理。

getBoundingClientRect

用法： rectObject = object.getBoundingClientRect()

返回一組用於描述元素的只讀屬性-left, top,right,botton, width, height,除了width和height外的屬性都是至關於於視口左上角而言的。bottom和right於正常的有所不一樣

當計算邊界矩形時，會考慮視口區域（或其餘可滾動元素）內的滾動操做，也就是說，當滾動位置發生了改變，top和left屬性值就會隨之當即發生變化（所以，它們的值是相對於視口的，而不是絕對的）。若是你須要得到相對於整個網頁左上角定位的屬性值，那麼只要給top、left屬性值加上當前的滾動位置（經過window.scrollX和window.scrollY），這樣就能夠獲取與當前的滾動位置無關的值。

爲了跨瀏覽器兼容，請使用 window.pageXOffset 和 window.pageYOffset 代替 window.scrollX 和 window.scrollY。不能訪問這些屬性的腳本能夠使用下面的代碼：

// For scrollX
(((t = document.documentElement) || (t = document.body.parentNode))
  && typeof t.scrollLeft == 'number' ? t : document.body).scrollLeft
// For scrollY
(((t = document.documentElement) || (t = document.body.parentNode))
  && typeof t.scrollTop == 'number' ? t : document.body).scrollTop

Intersection Observer

用法：

參考：https://juejin.im/post/5bbc60...