懶載入條件；img.offsettop < window.innerheight + document.body.scrolltop; 的src為空,寫在data-src屬性上
滿足條件則取dataset的src賦值給src即可
效能優化則利用去抖節流即可
滾動時可以判斷方向 向下滾動 利用數組裝未渲染的
也可以保留window的scrolltop 每次滾動時保留最大的scrolltop 篩選大於這個scrolltop的渲染
clientx, 指距離瀏覽器頂端距離
offsetx 指滑鼠距離其包含最近的x距離
pagex 指距離document的距離
screenx 指距離電腦螢幕
scrolltop 或者pageyoffset指被滾去的高度
offsettop 指定位元素距離其相對的定位元素最頂端距離 包含滾動
scrollheight 包含滾動後隱藏的元素總高度
offsetheight 包含padding邊框滾動條的高度
clentheight 純內容高度 不包含padding邊框滾動條
返回頂部:scrollintoview offsettop=0
參考文章:
原生懶載入與無限滾動
scrollheight 指元素的總高度，包含滾動條中的內容。唯讀屬性。不帶px單位。就是下圖中，54條資料的高度，但是因為有滾動條，所以螢幕看不到這麼高 scrolltop 當元素出現滾動條時，向下拖動滾動條，內容向上滾動的距離。可讀可寫屬性。不帶px單位。如果該元素沒有滾動條，則scrollto...
三種懶載入和區別
像vue這種單頁面應用，如果沒有應用懶載入，運用webpack打包後的檔案將會異常的大，造成進入首頁時，需要載入的內容過多，時間過長，會出現長時間的白屏，即使做了loading也是不利於使用者體驗，而運用懶載入則可以將頁面進行劃分，需要的時候載入頁面，可以有效的分擔首頁所承擔的載入壓力，減少首頁載入...
1 N問題與懶載入問題
有節點 1 2 4,5 3 6,7 8 9 10,11 12 當要查詢所有節點的子節點的子節點時 第1次 查詢父節點為1的子節點 第2次 父節點為2的子節點 第3次 父節點為3的子節點 第4次 查詢父節點為8的子節點 第5次 父節點為9的子節點 第6次 父節點為12的子節點 第7次 無也要查檢視 即...