圖片的加載是由src引起的，當(dāng)對(duì)src賦值時(shí)，瀏覽器就會(huì)請(qǐng)求圖片資源。根據(jù)這個(gè)原理，我們使用HTML5 的data-xxx屬性來(lái)儲(chǔ)存圖片的路徑，在需要加載圖片的時(shí)候，將data-xxx中圖片的路徑賦值給src，這樣就實(shí)現(xiàn)了圖片的按需加載，即懶加載。
注意：data-xxx 中的xxx可以自定義，這里我們使用data-src來(lái)定義。
懶加載的實(shí)現(xiàn)重點(diǎn)在于確定用戶(hù)需要加載哪張圖片，在瀏覽器中，可視區(qū)域內(nèi)的資源就是用戶(hù)需要的資源。所以當(dāng)圖片出現(xiàn)在可視區(qū)域時(shí)，獲取圖片的真實(shí)地址并賦值給圖片即可。
使用原生JavaScript實(shí)現(xiàn)懶加載：
知識(shí)點(diǎn)：
1. window.innerHeight 是瀏覽器可視區(qū)的高度
2. document.body.scrollTop || document.documentElement.scrollTop 是瀏覽器滾動(dòng)的過(guò)的距離
3. imgs.offsetTop 是元素頂部距離文檔頂部的高度(包括滾動(dòng)條的距離)
4. 圖片加載條件：img.offsetTop < window.innerHeight + document.body.scrollTop;
圖示：
代碼實(shí)現(xiàn)：
京公網(wǎng)安備 11010802030320號(hào)