国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Javascript零碎之IntersectionObserver

張遷 / 1624人閱讀

摘要:主要用于元素可見性的監(jiān)聽,比傳統(tǒng)通過全局監(jiān)聽事件去判斷可見性無論是性能還是便利性都要好得多。問題是這種通過監(jiān)聽的方式很容易導(dǎo)致性能問題,或者多多少少會(huì)有些性能損失。

IntersectionObserver主要用于元素可見性的監(jiān)聽,比傳統(tǒng)通過全局監(jiān)聽scroll事件去判斷可見性無論是性能還是便利性都要好得多。因?yàn)閍pi比較新,存在兼容性問題,好在已經(jīng)有了兼容的polyfill.其基本介紹和使用方式都可以在該polyfill對應(yīng)網(wǎng)站上看到。這里主要通過例子的形式,說明其實(shí)用的場景。

圖片懶加載 之前的方式

以前我們實(shí)現(xiàn)圖片懶加載的原理是這樣的:

</>復(fù)制代碼

  1. window.addEventListener("scroll", lazyload);
  2. function lazyload() {
  3. const imgs = document.querySelector(".img");
  4. const innerHeight = util.innerHeight();
  5. const scrollTop = util.scrollTop();
  6. imgs.forEach((img) => {
  7. const imgOffsetH = util.getPosition(img).top;
  8. // 距離頁面頂部的距離 <= 視窗高 + 往上滾進(jìn)去的距離
  9. if(imgOffsetH <= innerHeight + scrollTop) {
  10. img.src = img.getAttribute("data-src");
  11. }
  12. })
  13. }

條件是:距離頁面頂部的距離 <= 視窗高 + 往上滾進(jìn)去的距離,即算做圖片可見了才加載它。問題是這種通過監(jiān)聽scroll的方式很容易導(dǎo)致性能問題,或者多多少少會(huì)有些性能損失。

IntersectionObserver的方式

</>復(fù)制代碼

  1. const io = new IntersectionObserver((entrys) => {
  2. entrys.forEach((img) => {
  3. if(!img.isIntersecting) return;
  4. img.src = img.getAttribute("data-src");
  5. io.unobserve(img);
  6. })
  7. }, {
  8. //即滾動(dòng)到距離底部50px時(shí)開始算交互區(qū)
  9. rootMargin:"0px 0px 50px 0px"
  10. })
  11. imgs.forEach((img) => {
  12. io.observe(img);
  13. })

非常的清晰和簡單,而且由于是原生的功能,不會(huì)引起性能損耗。這里的rootMargin參數(shù)非常好用,因?yàn)橐话闱闆r下的交互條件都需要添加一定的閾值,以實(shí)現(xiàn)更優(yōu)雅和流暢的體驗(yàn),而通過rootMargin能非常簡單的實(shí)現(xiàn)這點(diǎn)。

</>復(fù)制代碼

  1. 完整示例請參考lazyload.html
滾動(dòng)分頁 以前的方式

通過判斷滾動(dòng)是否到底部,即 視窗高+往上滾進(jìn)去的距離>= 頁面高,來作為加載新的一頁的條件:

</>復(fù)制代碼

  1. window.addEventListener("scroll", () => {
  2. const innerHeight = util.innerHeight();
  3. const scrollTop = util.scrollTop();
  4. const scrollHeight = util.scrollHeight();
  5. // 滾動(dòng)到距離底部50px
  6. if(innerHeight + scrollTop >= scrollHeight - 50) {
  7. loadMore();
  8. }
  9. });
IntersectionObserver的方式

在最底部設(shè)置一個(gè)加載更多的標(biāo)記器,監(jiān)聽它是否出現(xiàn),作為加載新頁的條件:

</>復(fù)制代碼

  1. const io = new IntersectionObserver((entrys) => {
  2. entrys.forEach((entry) => {
  3. if(!entry.isIntersecting) return;
  4. loadMore();
  5. })
  6. }, {
  7. rootMargin:"0px 0px 50px 0px"
  8. })
  9. //監(jiān)聽最底部的loadmore是否出現(xiàn)
  10. const lMore = document.querySelector(".load-more");
  11. io.observe(lMore);

在性能上仍然更勝一籌,而且不必每次都去判斷視窗高、滾進(jìn)去的距離等等,將以往很麻煩的事情變得簡單而快捷。

</>復(fù)制代碼

  1. 完整示例請參考paging.html

通過上面的兩個(gè)例子,基本能了解IntersectionObserver的功能實(shí)用場景,即監(jiān)聽元素的出現(xiàn),實(shí)現(xiàn)懶加載(可以是圖片、模版、甚至組件等等)、元素進(jìn)出動(dòng)畫、分頁等各種形式的功能。這對優(yōu)化整個(gè)頁面的性能還是非常有幫助的,所以在日常的項(xiàng)目中還是很值得嘗試。

</>復(fù)制代碼

  1. 本文收錄在個(gè)人的Github上https://github.com/kekobin/bl... ,覺得有幫助的,歡迎start哈。支持原創(chuàng),未經(jīng)本人同意,請勿轉(zhuǎn)載!

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

轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/105176.html

相關(guān)文章

  • Javascript零碎各種寬高屬性及應(yīng)用

    摘要:一掛在上的上最常用的只有其中,永遠(yuǎn)都是窗口的大小,跟隨窗口變化而變化。這個(gè)是距該元素最近的不為的祖先元素,如果沒有則指向元素。 在Javascript的開發(fā)過程中,我們總會(huì)看到類似如下的邊界條件判斷(懶加載): const scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.b...

    DevYK 評(píng)論0 收藏0
  • 圖片懶加載的前世今生

    摘要:配置項(xiàng)配置項(xiàng)中的參數(shù)有以下三個(gè)所監(jiān)聽對象的具體祖先元素,默認(rèn)是計(jì)算交叉狀態(tài)時(shí),將附加到祖先元素上,從而有效的擴(kuò)大或者縮小祖先元素判定區(qū)域設(shè)置一系列的閾值,當(dāng)交叉狀態(tài)達(dá)到閾值時(shí),會(huì)觸發(fā)回調(diào)函數(shù)。 一、前言 ??通常情況下,HTML 中的圖片資源會(huì)自上而下依次加載,而部分圖片只有在用戶向下滾動(dòng)頁面的場景下才能被看見,否則這部分圖片的流量就白白浪費(fèi)了。 ??所以,對于那些含有大量圖片資源的網(wǎng)...

    zhaot 評(píng)論0 收藏0
  • 組件復(fù)用那些事兒 - React 實(shí)現(xiàn)按需加載輪子

    摘要:同時(shí),懶加載按需加載概念至關(guān)重要。時(shí)至今日,這些實(shí)現(xiàn)懶加載腳本的代碼仍有學(xué)習(xí)意義。代碼實(shí)戰(zhàn)下面讓我們動(dòng)手實(shí)現(xiàn)一個(gè)按需加載輪子。同樣,對于組件也可以使用無狀態(tài)組件函數(shù)式組件實(shí)現(xiàn)這樣無疑更加簡潔。 組件化在當(dāng)今前端開發(fā)領(lǐng)域中是一個(gè)非常重要的概念。著名的前端類庫,比如 React、Vue 等對此概念都倍加推崇。確實(shí),組件化復(fù)用性(reusability)和模塊性(modularization...

    lidashuang 評(píng)論0 收藏0
  • 組件復(fù)用那些事兒 - React 實(shí)現(xiàn)按需加載輪子

    摘要:同時(shí),懶加載按需加載概念至關(guān)重要。時(shí)至今日,這些實(shí)現(xiàn)懶加載腳本的代碼仍有學(xué)習(xí)意義。代碼實(shí)戰(zhàn)下面讓我們動(dòng)手實(shí)現(xiàn)一個(gè)按需加載輪子。同樣,對于組件也可以使用無狀態(tài)組件函數(shù)式組件實(shí)現(xiàn)這樣無疑更加簡潔。 組件化在當(dāng)今前端開發(fā)領(lǐng)域中是一個(gè)非常重要的概念。著名的前端類庫,比如 React、Vue 等對此概念都倍加推崇。確實(shí),組件化復(fù)用性(reusability)和模塊性(modularization...

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

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

0條評(píng)論

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