秋招面試的時候在說到效能優化的時候也說了懶載入,可面試官進一步問具體怎麼實現時,我卻沉默了,心想,不就是隨著滾動條的滾動載入資料嗎?要怎麼具體?好吧,我不會(我真是個酸菜魚)。容器
既然是滾動載入資料,那麼我們就需要乙個有滾動條的容器,如下**便建立了乙個這樣的容器:
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裝置的記憶體。這些資源例如大量資料,音訊...