成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Intersection observer檢測(cè)元素是否在視窗內(nèi)

HollisChuang / 3370人閱讀

摘要：新檢測(cè)原理允許你配置一個(gè)回調(diào)函數(shù)，每當(dāng)進(jìn)入瀏覽器視窗時(shí)，觸發(fā)回調(diào)函數(shù)?；卣{(diào)函數(shù)案例源碼地址元素和元素相交程度達(dá)到該值的時(shí)候注冊(cè)的回調(diào)函數(shù)將會(huì)被執(zhí)行。默認(rèn)值是意味著只要有一個(gè)像素出現(xiàn)在元素中，回調(diào)函數(shù)將會(huì)被執(zhí)行。

前言

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

當(dāng)頁面滾動(dòng)時(shí)，懶加載圖片或其他內(nèi)容。


實(shí)現(xiàn)“可無限滾動(dòng)”網(wǎng)站，也就是當(dāng)用戶滾動(dòng)網(wǎng)頁時(shí)直接加載更多內(nèi)容，無需翻頁。


為計(jì)算廣告收益，檢測(cè)其廣告元素的曝光情況。


根據(jù)用戶是否已滾動(dòng)到相應(yīng)區(qū)域來靈活開始執(zhí)行任務(wù)或動(dòng)畫。
通常檢測(cè)是否在視窗內(nèi)原理

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

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

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

新檢測(cè)原理Intersection observer

Intersection observer 允許你配置一個(gè)回調(diào)函數(shù)，每當(dāng)target進(jìn)入瀏覽器視窗時(shí)，觸發(fā)回調(diào)函數(shù)。

源碼地址：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);
參數(shù)

options 配置項(xiàng)

root 目標(biāo)元素。默認(rèn)使用瀏覽器視口做為root


rootMargin root元素的外邊距。


threshold 閾值?？梢允菃我坏膎umber也可以是number數(shù)組，一般取1。

callback 回調(diào)函數(shù)

案例

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

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

插件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支持性不好，用到的小伙伴們要注意這點(diǎn)了，兼容性具體看下圖：

其他鏈接 
官方鏈接[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 .. :)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/100674.html

相關(guān)文章

  • 原生實(shí)現(xiàn)img-lazyLoad:圖片延遲加載（基于intersection Observer）

    摘要：接下來，我們需要利用對(duì)這些暫時(shí)看不見的圖片元素進(jìn)行觀察，當(dāng)確認(rèn)他們滾動(dòng)到了窗體的可視區(qū)域時(shí)，我們?cè)诨卣{(diào)函數(shù)中對(duì)其進(jìn)行加載。創(chuàng)建一個(gè)，配置元素和回調(diào)函數(shù)觸發(fā)機(jī)制，這里我們將這個(gè)設(shè)為。 點(diǎn)擊查看視頻教程哦?。。?！ intersection Observer簡(jiǎn)介 點(diǎn)擊查閱MDN關(guān)于此api的使用說明 這個(gè)api是用來檢測(cè)dom元素交集的，常見的應(yīng)用場(chǎng)景之一就是本文提到的對(duì)圖片進(jìn)行懶加載，即：...

    shuibo 評(píng)論0 收藏0

  • 圖像延遲加載 && 列表圖順序加載

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

    ghnor 評(píng)論0 收藏0

  • 如何通過Vue自定義指令實(shí)現(xiàn)前端埋點(diǎn)詳析

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

    3403771864 評(píng)論0 收藏0

  • 判斷元素是否在可視區(qū)域

    摘要：如果要實(shí)現(xiàn)圖片懶加載需要去判斷圖片是否在可視區(qū)域。判斷方法判斷一個(gè)元素是否在可視區(qū)域，我們有通常有兩種辦法，第一種是使用元素的屬性的值和頁面的進(jìn)行對(duì)比如果的值小于表示元素在可視區(qū)域內(nèi)。 前言 圖片懶加載在網(wǎng)站運(yùn)用圖片比較多的時(shí)候回用到，圖片懶加載可以讓不在可視區(qū)域的圖片不去加載，避免一次性加載過多圖片導(dǎo)致請(qǐng)求阻塞，提高網(wǎng)站加載速度和用戶體驗(yàn)。如果要實(shí)現(xiàn)圖片懶加載需要去判斷圖片是否在可視...

    Cristalven 評(píng)論0 收藏0

  • 前端每周清單第 43 期：2017 JavaScript 回顧、Rust 與 WebAssembly

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

    xorpay 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<