Intersection observer檢測元素是否在視窗內

HollisChuang 發布于2019-08-23 14:28 / 3357人閱讀

摘要：新檢測原理允許你配置一個回調函數，每當進入瀏覽器視窗時，觸發回調函數?；卣{函數案例源碼地址元素和元素相交程度達到該值的時候注冊的回調函數將會被執行。默認值是意味著只要有一個像素出現在元素中，回調函數將會被執行。

前言

一直以來，檢測元素在瀏覽器視窗口內不是件容易的事，很多解決方案都不能很準確的判斷，計算量也有可能拖慢網站性能。
但是很多場景都需要用到：

當頁面滾動時，懶加載圖片或其他內容。

實現“可無限滾動”網站，也就是當用戶滾動網頁時直接加載更多內容，無需翻頁。

為計算廣告收益，檢測其廣告元素的曝光情況。

根據用戶是否已滾動到相應區域來靈活開始執行任務或動畫。

通常檢測是否在視窗內原理

監聽瀏覽器滾動事件scroll，對每個目標元素執行Element.getBoundingClientRect(),getBoundingClientRect方法返回元素的大小及其相對于視口的位置。?此方法可獲取整個網頁左上角定位，及距瀏覽器頂部的或左側的距離，然后用innerHeight 、innerwidth 等得到視窗大小，以此相減來判斷是否在視窗范圍內。

具體代碼如下：https://codepen.io/raoenhui/pen/BGBYpX

還有其他檢測原理大多都是通過計算得到，但是下面我將要介紹由瀏覽器自帶方法檢測元素是否在視窗內。

新檢測原理Intersection observer

Intersection observer 允許你配置一個回調函數，每當target進入瀏覽器視窗時，觸發回調函數。

源碼地址：https://codepen.io/raoenhui/pen/XoVEjK

用法

var options = {
    root: document.querySelector("#scrollArea"), 
    rootMargin: "0px", 
    threshold: 1.0
}
var callback = function(entries, observer) { 
    /* Content excerpted, show below */ 
};
var observer = new IntersectionObserver(callback, options);

參數

options 配置項

root 目標元素。默認使用瀏覽器視口做為root

rootMargin root元素的外邊距。

threshold 閾值。可以是單一的number也可以是number數組，一般取1。

callback 回調函數

案例

源碼地址：https://codepen.io/raoenhui/pen/xQKPaK

target元素和root元素相交程度達到該值的時候IntersectionObserver注冊的回調函數將會被執行。
如果你只是想要探測當target元素的在root元素中的可見性超過50%的時候，你可以指定該屬性值為0.5。如果你想要target元素在root元素的可見程度每多25%就執行一次回調，那么你可以指定一個數組[0, 0.25, 0.5, 0.75, 1]。默認值是0(意味著只要有一個target像素出現在root元素中，回調函數將會被執行)。該值為1.0含義是當target完全出現在root元素中時候回調才會被執行。

插件jquery_lazyload懶加載就是用到了此方法，

源碼地址：https://github.com/tuupola/jquery_lazyload

 this.observer = new IntersectionObserver(function(entries) {
                entries.forEach(function (entry) {
                    if (entry.intersectionRatio > 0) {
                        self.observer.unobserve(entry.target);
                        let src = entry.target.getAttribute(self.settings.src);
                        let srcset = entry.target.getAttribute(self.settings.srcset);
                        if ("img" === entry.target.tagName.toLowerCase()) {
                            if (src) {
                                entry.target.src = src;
                            }
                            if (srcset) {
                                entry.target.srcset = srcset;
                            }
                        } else {
                            entry.target.style.backgroundImage = "url(" + src + ")";
                        }
                    }
                });
            }, observerConfig);

兼容性

兼容性chrome基本支持，但是意外的是safari支持性不好，用到的小伙伴們要注意這點了，兼容性具體看下圖：

其他鏈接

官方鏈接[Intersection Observer API

](https://developer.mozilla.org...

https://codepen.io/raoenhui/pen/BGBYpX

https://codepen.io/raoenhui/pen/XoVEjK

https://codepen.io/raoenhui/pen/xQKPaK

我的原文地址 https://raoenhui.github.io/js/2019/01/03/IntersectionObserver/

Happy coding .. :)

云服務器 GPU云服務器內元素 php是否數組元素 html塊內元素間距 js刪除節點內元素

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100674.html

原生實現img-lazyLoad:圖片延遲加載（基于intersection Observer）

摘要：接下來，我們需要利用對這些暫時看不見的圖片元素進行觀察，當確認他們滾動到了窗體的可視區域時，我們在回調函數中對其進行加載。創建一個，配置元素和回調函數觸發機制，這里我們將這個設為。點擊查看視頻教程哦?。。?！ intersection Observer簡介點擊查閱MDN關于此api的使用說明這個api是用來檢測dom元素交集的，常見的應用場景之一就是本文提到的對圖片進行懶加載，即：...

shuibo 2019-08-23 15:05 評論0 收藏0
圖像延遲加載 && 列表圖順序加載

摘要：此外，跟蹤尚未延遲加載的元素數量，以及取消綁定滾動事件處理程序的繁瑣工作將由開發者來完成。圖像延遲加載列表圖順序加載的組件已經開源啦有興趣的同學可以查看使用起來非常簡單圖片延時加載十分重要，尤其是對于移動端用戶。從理論上來看，圖像延遲加載機制十分簡單，但實際上卻有很多需要注意的細節。此外，有多個不同的用例均受益于延遲加載。首先，我們來了解一下在 HTML 中延遲加載內聯圖像。延遲加載...

ghnor 2019-05-23 17:33 評論0 收藏0
如何通過Vue自定義指令實現前端埋點詳析

　　獲取用戶的交互習慣及喜好，進一步提升轉化率，可以在之前的埋點方案實現中，都是在具體的按鈕或者圖片被點擊或者被曝光時主動通過事件去上報埋點。但這種方法適合在埋點比較少時還行的項目，遇見項目中需要大量埋點時，添加的代碼就太多了，就會埋點邏輯與業務邏輯的高耦合。　　由此需要換種方式。我先給大家普及下埋點上報方式都有哪些？　　手動埋點　　可視化埋點　　無痕埋點　　手動埋點，顧名思義就是純手動寫代碼，調...

3403771864 2022-09-14 22:57 評論0 收藏0
判斷元素是否在可視區域

摘要：如果要實現圖片懶加載需要去判斷圖片是否在可視區域。判斷方法判斷一個元素是否在可視區域，我們有通常有兩種辦法，第一種是使用元素的屬性的值和頁面的進行對比如果的值小于表示元素在可視區域內。前言圖片懶加載在網站運用圖片比較多的時候回用到，圖片懶加載可以讓不在可視區域的圖片不去加載，避免一次性加載過多圖片導致請求阻塞，提高網站加載速度和用戶體驗。如果要實現圖片懶加載需要去判斷圖片是否在可視...

Cristalven 2019-08-23 12:21 評論0 收藏0
前端每周清單第 43 期：2017 JavaScript 回顧、Rust 與 WebAssembly

摘要：楊冀龍是安全焦點民間白帽黑客組織核心成員，被浪潮之巔評為中國新一代黑客領軍人物之一他在本文中依次分享了對于黑客的定義如何從黑客成為一名安全創業者技術創業踩過的坑給技術創業者建議等內容。 showImg(https://segmentfault.com/img/remote/1460000012377230?w=1240&h=796); 前端每周清單專注前端領域內容，以對外文資料的搜集為...

xorpay 2019-08-22 11:15 評論0 收藏0