亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

頁面如何實現滾屏加載?

頁面如何實現滾屏加載?

MYYA 2018-11-16 08:03:33
項目背景是有一個數據可視化頁面,頁面是有多個圖表。一次打開頁面加載所有圖表導致頁面加載效率感人。然后我想做類似與錨點定位,分塊加載的方式,達到分流的作用,實現頁面加載效率提升的目的但是又和普通的錨點定位有所不同:首先,觸發方式是用頁面的滾動事件來觸發——當我滾動當前頁面到某一數據圖表區域的時候,再加載該可視區域的數據,并渲染圖表目前的問題是,如何將滾動監聽事件與分區加載邏輯想關聯:因為圖表的高度并不是固定的,而是動態改變的想問問大家要實現這個功能,有沒有好的可行的思路
查看完整描述

1 回答

?
收到一只叮咚

TA貢獻1821條經驗 獲得超5個贊

給每個圖表element一個id,滾動時判斷這個element是否在可視區域內,如果在且無數據就請求。
你不用關心每個圖表的高度,只要關心offsetTop < innerHeight + scrollTop;
或者直接用getBoundingClientRect().top和innerHeight比較

查看完整回答
反對 回復 2018-11-16
  • 1 回答
  • 0 關注
  • 793 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號