首先，先講講什麼叫圖片懶加載吧，當打開一個有很多圖片的頁面時，先只加載頁面上看到的圖片，等滾動到頁面下面時，再加載所需的圖片。
然後，爲什麼要實現圖片懶加載呢？因爲減少或延遲請求數，緩解瀏覽器的壓力，增強用戶體驗。
第一步，獲取所有圖片
第二步， 獲取 頁面 可視區域高度
第三步， 獲取 滾動 高度
<body>
<img src="./img/loading.gif" lazyload-src="./img/1.jpg" alt="">
<img src="./img/loading.gif" lazyload-src="./img/2.jpg" alt="">
<img src="./img/loading.gif" lazyload-src="./img/3.jpg" alt="">
<img src="./img/loading.gif" lazyload-src="./img/4.jpg" alt="">
<img src="./img/loading.gif" lazyload-src="./img/5.jpg" alt="">
<img src="./img/loading.gif" lazyload-src="./img/6.jpg" alt="">
<img src="./img/loading.gif" lazyload-src="./img/7.jpg" alt="">
<img src="./img/loading.gif" lazyload-src="./img/8.gif" alt="">
<img src="./img/loading.gif" lazyload-src="./img/9.jpg" alt="">
<script>
function lazyLoad(){
var imgs=document.querySelectorAll("img");
var innerH= window.innerHeight;
var scrollY= window.scrollY;
for(let i=0;i<imgs.length;i++){
if( innerH+scrollY > imgs[i].offsetTop ){
// console.log("圖片"+i+"進入可視區域了")
setTimeout(function(){
imgs[i].src= imgs[i].getAttribute("lazyload-src")
},200)
}
}
}
lazyLoad()
window.onscroll=function(){
lazyLoad() //頁面加載時可見的圖片
}
</script>