滾動載入資料(懶載入),今天終於去把它實現了

2021-10-22 16:33:01 字數 828 閱讀 4991

秋招面試的時候在說到效能優化的時候也說了懶載入,可面試官進一步問具體怎麼實現時,我卻沉默了,心想,不就是隨著滾動條的滾動載入資料嗎?要怎麼具體?好吧,我不會(我真是個酸菜魚)。容器

既然是滾動載入資料,那麼我們就需要乙個有滾動條的容器,如下**便建立了乙個這樣的容器:

class

="commentcontainer"

ref="commentcontainer"

>

div>

//css

.commentcontainer

上訴容器中當內容超過高度430px時便會在垂直方向上出現滾動條

搞清楚html元素的三個屬性clientheight、scrolltop、scrollheight

clientheight:元素的可視高度

scrolltop:滾動條的滾動距離,就是滾動條距離容器頂部的距離

scrollheight:容器實際內容的高度,包括超出視窗的部分

拿上訴div元素來說的,它的clientheight就是它的高度430px,也就是視窗的高度,這部分高度是我們看得到的,然後當滾動條滾到容器可視高度的最底部時,此時:

scrolltop+clientheight = scrollheight

根據條件獲取資料

我們判斷,當scrolltop+clientheight = scrollheight成立時,我們就獲取資料,然後push到原資料中

js(vue)**如下:

data()

;}, methods:);

}});

}}

原生懶載入與無限滾動

scrollheight 指元素的總高度,包含滾動條中的內容。唯讀屬性。不帶px單位。就是下圖中,54條資料的高度,但是因為有滾動條,所以螢幕看不到這麼高 scrolltop 當元素出現滾動條時,向下拖動滾動條,內容向上滾動的距離。可讀可寫屬性。不帶px單位。如果該元素沒有滾動條,則scrollto...

vue資料懶載入

需求 iview級聯元件載入本地區域資料時,由於資料量較大,壓縮後大概是153k,如果直接import引入資料,載入頁面的時候頁面會出現2到3秒的卡頓。解決辦法 在級聯元件觸發下拉事件的時候載入資料。如下 loadareadata catch error 這樣還是會有問題,就是修改回顯還是要載入,還...

IOS資料懶載入

懶載入,又稱為延遲載入。說的通俗一點,就是在開發中,當程式中需要利用的資源時。在程式啟動的時候不載入資源,只有在執行當需要一些資源時,再去載入這些資源。我們知道ios裝置的記憶體有限,如果在程式在啟動後就一次性載入將來會用到的所有資源,那麼就有可能會耗盡ios裝置的記憶體。這些資源例如大量資料,音訊...