IntersectionObserver API 使用教程

xsbm1994 8年前發布 | 7K 次閱讀 API 移動開發

網頁開發時，常常需要了解某個元素是否進入了"視口"（viewport），即用戶能不能看到它。

上圖的綠色方塊不斷滾動，頂部會提示它的可見性。

傳統的實現方法是，監聽到 scroll 事件后，調用目標元素（綠色方塊）的 getBoundingClientRect() 方法，得到它對應于視口左上角的坐標，再判斷是否在視口之內。這種方法的缺點是，由于 scroll 事件密集發生，計算量很大，容易造成性能問題。

目前有一個新的 IntersectionObserver API ，可以自動"觀察"元素是否可見，Chrome 51+ 已經支持。由于可見（visible）的本質是，目標元素與視口產生一個交叉區，所以這個 API 叫做"交叉觀察器"。

一、API

它的用法非常簡單。

var io = new IntersectionObserver(callback, option);

上面代碼中， IntersectionObserver 是瀏覽器原生提供的構造函數，接受兩個參數： callback 是可見性變化時的回調函數， option 是配置對象（該參數可選）。

構造函數的返回值是一個觀察器實例。實例的 observe 方法可以指定觀察哪個 DOM 節點。

// 開始觀察
io.observe(document.getElementById('example'));

// 停止觀察
io.unobserve(element);

// 關閉觀察器
io.disconnect();

上面代碼中， observe 的參數是一個 DOM 節點對象。如果要觀察多個節點，就要多次調用這個方法。

io.observe(elementA);
io.observe(elementB);

二、callback 參數

目標元素的可見性變化時，就會調用觀察器的回調函數 callback 。

callback 一般會觸發兩次。一次是目標元素剛剛進入視口（開始可見），另一次是完全離開視口（開始不可見）。

var io = new IntersectionObserver(
  entries => {
    console.log(entries);
  }
);

上面代碼中，回調函數采用的是箭頭函數的寫法。 callback 函數的參數（ entries ）是一個數組，每個成員都是一個 IntersectionObserverEntry 對象。舉例來說，如果同時有兩個被觀察的對象的可見性發生變化， entries 數組就會有兩個成員。

三、IntersectionObserverEntry 對象

IntersectionObserverEntry 對象提供目標元素的信息，一共有六個屬性。

{
  time: 3893.92,
  rootBounds: ClientRect {
    bottom: 920,
    height: 1024,
    left: 0,
    right: 1024,
    top: 0,
    width: 920
  },
  boundingClientRect: ClientRect {
     // ...
  },
  intersectionRect: ClientRect {
    // ...
  },
  intersectionRatio: 0.54,
  target: element
}

每個屬性的含義如下。

time ：可見性發生變化的時間，是一個高精度時間戳，單位為毫秒
target ：被觀察的目標元素，是一個 DOM 節點對象
rootBounds ：根元素的矩形區域的信息， getBoundingClientRect() 方法的返回值，如果沒有根元素（即直接相對于視口滾動），則返回 null
boundingClientRect ：目標元素的矩形區域的信息
intersectionRect ：目標元素與視口（或根元素）的交叉區域的信息
intersectionRatio ：目標元素的可見比例，即 intersectionRect 占 boundingClientRect 的比例，完全可見時為 1 ，完全不可見時小于等于 0

上圖中，灰色的水平方框代表視口，深紅色的區域代表四個被觀察的目標元素。它們各自的 intersectionRatio 圖中都已經注明。

四、實例：惰性加載（lazy load）

有時，我們希望某些靜態資源（比如圖片），只有用戶向下滾動，它們進入視口時才加載，這樣可以節省帶寬，提高網頁性能。這就叫做"惰性加載"。

有了 IntersectionObserver API，實現起來就很容易了。

function query(selector) {
  return Array.from(document.querySelectorAll(selector));
}

var observer = new IntersectionObserver(
  function(changes) {
    changes.forEach(function(change) {
      var container = change.target;
      var content = container.querySelector('template').content;
      container.appendChild(content);
      observer.unobserve(container);
    });
  }
);

query('.lazy-loaded').forEach(function (item) {
  observer.observe(item);
});

上面代碼中，只有目標區域可見時，才會將模板內容插入真實 DOM，從而引發靜態資源的加載。

五、實例：無限滾動

無限滾動（infinite scroll）的實現也很簡單。

var intersectionObserver = new IntersectionObserver(
  function (entries) {
    // 如果不可見，就返回
    if (entries[0].intersectionRatio <= 0) return;
    loadItems(10);
    console.log('Loaded new items');
  });

// 開始觀察
intersectionObserver.observe(
  document.querySelector('.scrollerFooter')
);

無限滾動時，最好在頁面底部有一個頁尾欄（又稱sentinels）。一旦頁尾欄可見，就表示用戶到達了頁面底部，從而加載新的條目放在頁尾欄前面。這樣做的好處是，不需要再一次調用 observe() 方法，現有的 IntersectionObserver 可以保持使用。

六、Option 對象

IntersectionObserver 構造函數的第二個參數是一個配置對象。它可以設置以下屬性。

6.1 threshold 屬性

threshold 屬性決定了什么時候觸發回調函數。它是一個數組，每個成員都是一個門檻值，默認為 [0] ，即交叉比例（ intersectionRatio ）達到 0 時觸發回調函數。

new IntersectionObserver(
  entries => {/* ... */}, 
  {
    threshold: [0, 0.25, 0.5, 0.75, 1]
  }
);

用戶可以自定義這個數組。比如， [0, 0.25, 0.5, 0.75, 1] 就表示當目標元素 0%、25%、50%、75%、100% 可見時，會觸發回調函數。

6.2 root 屬性，rootMargin 屬性

很多時候，目標元素不僅會隨著窗口滾動，還會在容器里面滾動（比如在 iframe 窗口里滾動）。容器內滾動也會影響目標元素的可見性，參見本文開始時的那張示意圖。

IntersectionObserver API 支持容器內滾動。 root 屬性指定目標元素所在的容器節點（即根元素）。注意，容器元素必須是目標元素的祖先節點。

var opts = { 
  root: document.querySelector('.container'),
  rootMargin: "500px 0px" 
};

var observer = new IntersectionObserver(
  callback,
  opts
);

上面代碼中，除了 root 屬性，還有 rootMargin 屬性。后者定義根元素的 margin ，用來擴展或縮小 rootBounds 這個矩形的大小，從而影響 intersectionRect 交叉區域的大小。它使用CSS的定義方法，比如 10px 20px 30px 40px ，表示 top、right、bottom 和 left 四個方向的值。

這樣設置以后，不管是窗口滾動或者容器內滾動，只要目標元素可見性變化，都會觸發觀察器。

七、注意點

IntersectionObserver API 是異步的，不隨著目標元素的滾動同步觸發。

規格寫明， IntersectionObserver 的實現，應該采用 requestIdleCallback() ，即只有線程空閑下來，才會執行觀察器。這意味著，這個觀察器的優先級非常低，只在其他任務執行完，瀏覽器有了空閑才會執行。

八、參考鏈接

來自：http://www.ruanyifeng.com/blog/2016/11/intersectionobserver_api.html

本文由用戶 xsbm1994 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1478244592778.html

API 移動開發