js實現圖片的懶載入
圖片懶載入指的是在瀏覽過程中隨著需要才被加載出來，例如某寶上面瀏覽商品時，會伴隨很多的圖片，如果一次全部加載出來的話，顯然資源有些浪費，並且載入速度也會相對降低，那麼懶載入的實現很重要。即隨著瀏覽翻閱時，下面的圖片才被加載出來，這樣又不浪費頻寬，訪問網頁速度也很快，使用者體驗也會有所提升。
說了這麼多，其實所需要注意的要點有：
1. 螢幕可視區域的高度
2. 每張圖片在文件中的高度
3. 圖片符合要求進行載入時，將圖片地址賦值給屬性 src
4. 對螢幕滾動事件進行監控
5. 首次進入網頁未滑動螢幕時要顯示的圖片
要測試圖片懶載入效果，可以在Chrome瀏覽器的控制檯選擇“Network”，把“Online”改為“Slow 3G”就可以模擬慢速網路下瀏覽器懶載入圖片的效果
完整程式碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript圖片懶載入實現</title>
<style>
p{
border:2px solid red;
}
img{
width: 300px;
height:100px;
margin-bottom: 100px;
}
</style>
</head>
<body>
<div>
<p><img src="" data-original="./images/0.jpg" /></p>
<p><img src="" data-original="./images/1.jpg" /></p>
<p><img src="" data-original="./images/2.jpg" /></p>
<p><img src="" data-original="./images/3.jpg" /></p>
<p><img src="" data-original="./images/4.jpg" /></p>
<p><img src="" data-original="./images/5.jpg" /></p>
<p><img src="" data-original="./images/6.jpg" /></p>
<p><img src="" data-original="./images/7.jpg" /></p>
<p><img src="" data-original="./images/8.jpg" /></p>
<p><img src="" data-original="./images/9.jpg" /></p>
<p><img src="" data-original="./images/10.jpg" /></p>
<p><img src="" data-original="./images/11.jpg" /></p>
<p><img src="" data-original="./images/12.jpg" /></p>
<p><img src="" data-original="./images/13.jpg" /></p>
<p><img src="" data-original="./images/14.jpg" /></p>
<p><img src="" data-original="./images/15.jpg" /></p>
<p><img src="" data-original="./images/0.jpg" /></p>
<p><img src="" data-original="./images/1.jpg" /></p>
<p><img src="" data-original="./images/2.jpg" /></p>
<p><img src="" data-original="./images/3.jpg" /></p>
<p><img src="" data-original="./images/4.jpg" /></p>
<p><img src="" data-original="./images/5.jpg" /></p>
<p><img src="" data-original="./images/6.jpg" /></p>
<p><img src="" data-original="./images/7.jpg" /></p>
<p><img src="" data-original="./images/8.jpg" /></p>
</div>
<script>
var wHeight=document.documentElement.clientHeight ;//獲取螢幕可視高度
var imgs=document.querySelectorAll("img");
imgs.forEach(function(item,idx){
//getBoundingClientRect().top
var ownHeight=item.getBoundingClientRect().top;//獲取當前圖片在文件中的位置
if(ownHeight<=wHeight){
item.src=item.getAttribute("data-original")
}
})
window.onscroll=function(){//新增螢幕滾動事件
imgs.forEach(function(item,idx){
var hasSorollTop=window.scrollY;//獲取螢幕已滾動高度
var ownHeight=item.getBoundingClientRect().top;//獲取當前圖片在文件中的位置
console.log(hasSorollTop)
if(ownHeight<=(hasSorollTop+wHeight)){
//當圖片在螢幕滾動時，當圖片在文件中的位置小於螢幕已滾動高度+螢幕可視高度的時載入此圖片，
item.src=item.getAttribute("data-original")
}
})
}
</script>
</body>
</html>