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

資訊專欄INFORMATION COLUMN

JavaScript實現(xiàn)列表無限加載

android_c / 3248人閱讀

摘要：起因之前自己在使用這種網(wǎng)站時，經(jīng)?？吹綗o限加載的效果。原理在需要無限加載的列表底部，埋下一個隱藏元素。這時候就需要進行列表加載。通過查閱，得知方法返回元素的大小及其相對于視口的位置。

起因

之前自己在使用這種網(wǎng)站時，經(jīng)常看到無限加載的效果。
今天正好看到了getBoundingClientRect這個Api，就想著試試看如何實現(xiàn)Infinite scroll的效果。

原理

在需要無限加載的列表底部，埋下一個隱藏元素。
當(dāng)不斷滑動時，隱藏元素將出現(xiàn)在視窗(viewport)里，也就意味著當(dāng)前瀏覽的列表已經(jīng)到底部了。
這時候就需要進行列表加載。
大概的HTML結(jié)構(gòu)如下：


  
    
    
  • 我是文章
    • 
    
  • 我是文章
    • 
    
  • 我是文章
    • 
    
  • 我是文章
    • 
    
  • 我是文章
    •

也就是：滑動列表 => 隱藏的無限加載指示器出現(xiàn)在視圖 => 開始加載

那么重點就是檢測隱藏的無限加載指示器是否出現(xiàn)在視圖窗口。
還好，我們有getBoundingClientRect這個Api。

getBoundingClientRect

通過查閱MDN，得知：

Element.getBoundingClientRect()方法返回元素的大小及其相對于視口的位置。而除了 width 和 height 外的屬性都是相對于視口的左上角位置而言的。

至于兼容性，一片綠，可以放心使用。


Can I Use getboundingclientrect? Data on support for the getboundingclientrect feature across the major browsers from caniuse.com.

DOMRect 對象

getBoundingClientRect()方法的返回值是一個 DOMRect 對象，這個對象是由該元素的 getClientRects() 方法返回的一組矩形的集合, 即：是與該元素相關(guān)的CSS 邊框集合 。

對象的屬性如下圖所示：

其中的 top, left, bottom, right 均是元素自身相對于視圖左上角而言的。
就top, left屬性而言，很好理解。而bottom, right則一開始搞的有點懵，后面通過devtools觀察，發(fā)現(xiàn)bottom是元素的最底部相對于視圖窗口左上角而言的，而right則是元素的最右側(cè)相對于視圖窗口左上角而言的。
其中right-left為元素的寬度,bottom - top則是元素的高度。

檢測元素是否出現(xiàn)于視圖窗口中

在這里，有兩種情況，一個是元素是否出現(xiàn)于視圖窗口中，另一種則是元素是否完全出現(xiàn)于視圖窗口中。
兩種情況的區(qū)別在于一個是部分出現(xiàn)，一個是完全出現(xiàn)。

下面我把兩種情況都寫出來：

部分出現(xiàn)在視圖窗口中

function checkIsPartialVisible (element) {
  const rect = element.getBoundingClientRect()
  const {
    top,
    left,
    bottom,
    right
  } = rect
  const isPartialVisible = top >= 0 && left >= 0
  return isPartialVisible
}

全部出現(xiàn)于視圖窗口中：

function checkIsTotalVisible (element) {
  const rect = element.getBoundingClientRect()
  const {
    top,
    left,
    bottom,
    right
  } = rect
  const isTotalVisible = (
    top >= 0
    &&
    left >= 0
    &&
    bottom < document.documentElement.clientHeight
    &&
    right < document.documentElement.clientWidth
  )
  return isTotalVisible
}

那么問題來了：我們到底選用那種呢？
從無限加載這個業(yè)務(wù)場景出發(fā)，埋在列表最下邊的加載觸發(fā)器都非常小且不可見，因此推薦選用第二種，也就是完全出現(xiàn)于視圖窗口的方式。
至于第一種，更適合檢測該元素是否已經(jīng)出現(xiàn)在視圖窗口，但并不要求全部出現(xiàn)的情況。

實戰(zhàn)

具體可以看我在jsfiddle上寫的demo：
無限加載實例

后續(xù)

后續(xù)更多的則是一些性能優(yōu)化的事情，比如debounce或者throttle來減少scroll事件調(diào)用次數(shù)，加入ajax加載，loading indicator等。
那些都是屬于具體的業(yè)務(wù)范圍了，這兒不做討論。

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

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

相關(guān)文章

  • JavaScript實現(xiàn)列表無限加載

    摘要：起因之前自己在使用這種網(wǎng)站時，經(jīng)常看到無限加載的效果。原理在需要無限加載的列表底部，埋下一個隱藏元素。這時候就需要進行列表加載。通過查閱，得知方法返回元素的大小及其相對于視口的位置。 起因 之前自己在使用這種網(wǎng)站時，經(jīng)?？吹綗o限加載的效果。今天正好看到了getBoundingClientRect這個Api，就想著試試看如何實現(xiàn)Infinite scroll的效果。 原理 在需要無限加載...

    Riddler 評論0 收藏0

  • JS或Jquery

    摘要：大潮來襲前端開發(fā)能做些什么去年谷歌和火狐針對提出了的標(biāo)準(zhǔn)，顧名思義，即的體驗方式，我們可以戴著頭顯享受沉浸式的網(wǎng)頁，新的標(biāo)準(zhǔn)讓我們可以使用語言來開發(fā)。 VR 大潮來襲 --- 前端開發(fā)能做些什么 去年谷歌和火狐針對 WebVR 提出了 WebVR API 的標(biāo)準(zhǔn)，顧名思義，WebVR 即 web + VR 的體驗方式，我們可以戴著頭顯享受沉浸式的網(wǎng)頁，新的 API 標(biāo)準(zhǔn)讓我們可以使用 ...

    CatalpaFlat 評論0 收藏0

  • 【譯】無限滾動加載最佳實踐

    摘要：優(yōu)秀無限滾動的五項原則將無限滾動做好，并不是不可能完成的任務(wù)。提供為特定項添加書簽的可能無限滾動最常見的缺點之一就是，內(nèi)容出現(xiàn)的時候，沒法添加書簽。結(jié)論無限滾動實現(xiàn)得好的話，可以達到令人難以置信的光滑無縫體驗。 本文轉(zhuǎn)載自：眾成翻譯譯者：文藺鏈接：http://www.zcfy.cc/article/673原文：https://uxplanet.org/infinite-scrolli...

    Sunxb 評論0 收藏0

  • JS+HTML實現(xiàn)列表動態(tài)無限滾動

    摘要：實現(xiàn)列表動態(tài)無限滾動問題在開發(fā)頁面工程中，經(jīng)常會遇到滾動列表當(dāng)實際需要顯示的內(nèi)容寬度或高度超過容器的寬度或高度時，設(shè)置當(dāng)滾動列表中的內(nèi)容比較少時，我們可以一次性加載所有的內(nèi)容到列表容器中顯示。 JS+HTML實現(xiàn)列表動態(tài)無限滾動 問題 在HTML開發(fā)頁面工程中，經(jīng)常會遇到滾動列表-當(dāng)實際需要顯示的內(nèi)容寬度或高度超過容器的寬度或高度時，設(shè)置CSS overflow-x:auto;...

    Lorry_Lu 評論0 收藏0

  • JS+HTML實現(xiàn)列表動態(tài)無限滾動

    摘要：實現(xiàn)列表動態(tài)無限滾動問題在開發(fā)頁面工程中，經(jīng)常會遇到滾動列表當(dāng)實際需要顯示的內(nèi)容寬度或高度超過容器的寬度或高度時，設(shè)置當(dāng)滾動列表中的內(nèi)容比較少時，我們可以一次性加載所有的內(nèi)容到列表容器中顯示。 JS+HTML實現(xiàn)列表動態(tài)無限滾動 問題 在HTML開發(fā)頁面工程中，經(jīng)常會遇到滾動列表-當(dāng)實際需要顯示的內(nèi)容寬度或高度超過容器的寬度或高度時，設(shè)置CSS overflow-x:auto;...

    BakerJ 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<