首頁 > 軟體

原生JS Intersection Observer API實現懶載入

2022-07-23 18:00:30

引言

前一陣子在做一個專案的時候,因為每組資料都要先通過很龐大的計算,才把計算後的結果 Render 到頁面上,但這樣就導致如果單頁查出來的資料超過大概 5 筆,就會需要等待一段有感的時間,才能看到結果出現在畫面上。

後來為了解決這差勁使用者體驗,就使用到的標題上說到的 Lazy Loading 來處理。簡單說就是,雖然要顯示的資料量有 10 筆,但因為一個頁面大概只能呈現 2 到 3 筆,那我就先計算那 2 到 3 筆資料然後顯示就好,剩下的資料等使用者往下滾再繼續顯示,這樣等待時間就不會太久。

然後身為一個前端工程師,再想到這個解法以後,當然就是上 Github 找一個簡單又方便的元件來解決它


IT145.com E-mail:sddin#qq.com