JavaScript實現列表無限加載

android_c 發布于2019-08-20 16:45 / 3244人閱讀

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

起因

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

原理

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


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

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

那么重點就是檢測隱藏的無限加載指示器是否出現在視圖窗口。
還好，我們有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() 方法返回的一組矩形的集合, 即：是與該元素相關的CSS 邊框集合。

對象的屬性如下圖所示：

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

檢測元素是否出現于視圖窗口中

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

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

部分出現在視圖窗口中

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

全部出現于視圖窗口中：

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
}

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

實戰

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

后續

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

云服務器 GPU云服務器無限下拉列表郵件列表加載異常 php無限極分類列表實現列表頁

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

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

JavaScript實現列表無限加載

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

Riddler 2019-08-01 16:53 評論0 收藏0
JS或Jquery

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

CatalpaFlat 2019-08-22 11:17 評論0 收藏0
【譯】無限滾動加載最佳實踐

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

Sunxb 2019-08-19 18:37 評論0 收藏0
JS+HTML實現列表動態無限滾動

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

Lorry_Lu 2019-08-20 15:11 評論0 收藏0
JS+HTML實現列表動態無限滾動

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

BakerJ 2019-08-01 16:31 評論0 收藏0