方式一：html實現
在img標簽加上 loading="lazy"
方式二：js實現
通過js監聽頁面的滾動，實現的原理主要是判斷當前圖片是否到了可視區域：
- 拿到所有的圖片 dom 。
- 遍歷每個圖片判斷當前圖片是否到了可視區范圍內。
- 如果到了就設置圖片的 src 屬性。
- 綁定 window 的 scroll 事件，對其進行事件監聽。
在頁面初始化的時候，<img>圖片的src實際上是放在data-src屬性上的，當元素處于可視范圍內的時候，就把data-src賦值給src屬性，完成圖片加載。
方式三：IntersectionObserver實現
IntersectionObserver 是一個新的 API，可以自動"觀察"元素是否可見，Chrome 51+ 已經支持。由于可見（visible）的本質是，目標元素與視口產生一個交叉區，所以這個 API 叫做"交叉觀察器"。它的用法：IntersectionObserver 是瀏覽器原生提供的構造函數，接受兩個參數：callback 是可見性變化時的回調函數，option 是配置對象（該參數可選）。目標元素的可見性變化時，就會調用觀察器的回調函數 callback。callback 一般會觸發兩次。一次是目標元素剛剛進入視口（開始可見），另一次是完全離開視口（開始不可見）。
)
