javascript - Js動態載入圖片是怎麼判斷圖片在螢幕中的？

Question

滑鼠往下捲動，當目標區域出現在螢幕區域的時候載入圖片，那麼怎麼判斷這個目標區域出現在螢幕中了？

Answer 1

透過圖片的getBoundingClientRect()方法，返回相對於視口的left、top、right和bottom
判斷在不在視口內。

參考getBoundingClientRect

Answer 2

計算圖片到頁面頭部的距離，然後偵測捲軸滾動的距離