（原創(chuàng)不易，轉(zhuǎn)載請標明出處灼擂，謝謝）
應(yīng)用場景及背景介紹：
某一頁面有大量圖片。如果一開始全部加載，則同時請求較多的網(wǎng)絡(luò)資源，頁面會出現(xiàn)很長一段時間的空白氓癌，用戶體驗很不好，所以需要圖片懶加載贫橙。
圖片懶加載原理
- 所有圖片地址
src，先設(shè)置為某一圖片星压，這樣只會請求一次網(wǎng)絡(luò)資源 - 當(dāng)所需要的圖片進入瀏覽器窗口視野之后军洼，將圖片地址
src替換為真實的圖片地址甘桑。
演示效果
代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.wrap{
width: 800px;
margin: auto;
display: flex;
flex-wrap: wrap;
}
.wrap img{
width: 50%;
height: auto;
}
</style>
</head>
<body>
<div class="wrap">
</div>
<script>
let imgs = [
"http://seopic.699pic.com/photo/50156/2840.jpg_wh1200.jpg",
"http://seopic.699pic.com/photo/50148/0957.jpg_wh1200.jpg",
"http://seopic.699pic.com/photo/50146/0835.jpg_wh1200.jpg",
"http://seopic.699pic.com/photo/50021/1012.jpg_wh1200.jpg",
"http://seopic.699pic.com/photo/50127/5145.jpg_wh1200.jpg",
"http://seopic.699pic.com/photo/50122/4249.jpg_wh1200.jpg",
"http://seopic.699pic.com/photo/50041/6637.jpg_wh1200.jpg",
"http://seopic.699pic.com/photo/50085/0650.jpg_wh1200.jpg",
"http://seopic.699pic.com/photo/50120/4383.jpg_wh1200.jpg",
"http://seopic.699pic.com/photo/50035/4345.jpg_wh1200.jpg",
"http://seopic.699pic.com/photo/50119/3443.jpg_wh1200.jpg",
"http://seopic.699pic.com/photo/50075/8488.jpg_wh1200.jpg",
"http://seopic.699pic.com/photo/50087/0693.jpg_wh1200.jpg",
"http://seopic.699pic.com/photo/50154/8480.jpg_wh1200.jpg",
"http://seopic.699pic.com/photo/50063/0660.jpg_wh1200.jpg",
"http://seopic.699pic.com/photo/50046/2788.jpg_wh1200.jpg",
"http://seopic.699pic.com/photo/50070/7820.jpg_wh1200.jpg",
"http://seopic.699pic.com/photo/50025/5275.jpg_wh1200.jpg",
"http://seopic.699pic.com/photo/50025/1819.jpg_wh1200.jpg",
"http://seopic.699pic.com/photo/50036/1958.jpg_wh1200.jpg"
];
let wh = window.innerHeight;
let img = new Image();
img.src = 'http://img.zcool.cn/community/011546554b9ab1000001bf729a84ca.jpg';
img.onload = function(){ // 預(yù)置的這張圖片，必須加載完才能進行下面的操作
renderImgArr();
renderRealImg();
}
window.addEventListener('scroll',()=>{ // 添加監(jiān)聽事件
renderRealImg();
});
function renderImgArr(){ // 渲染dom改化，且將所有圖片的src，都先設(shè)置為 預(yù)置的圖片
let nodelist = []
for(i in imgs){
let tmp = `<img class='eimg' src='http://img.zcool.cn/community/011546554b9ab1000001bf729a84ca.jpg' data-src='`+ imgs[i] +`' />`;
nodelist.push(tmp);
}
let _html = nodelist.join('');
let wrap = document.getElementsByClassName('wrap')[0];
wrap.innerHTML = _html;
}
function renderRealImg(){ // 渲染真實圖片
let imgNodes = g('.eimg');
for(let i = 0 ; i < imgNodes.length; i++){
// 先檢測有沒有已被加載的屬性
if(!imgNodes[i].getAttribute('loaded')){ // 如果已經(jīng)被設(shè)置成真實圖片，則不必重復(fù)加載
// 再檢測到窗口的位置
if(wh>= (imgNodes[i].offsetTop - window.pageYOffset)){ // 圖片到窗口頂端的距離豹爹，小于整個窗口的高度，即這張圖出現(xiàn)在窗口視野內(nèi)。
imgNodes[i].setAttribute('src',imgNodes[i].getAttribute('data-src'));
imgNodes[i].setAttribute('loaded',true);
}else{ // 如果此張圖片沒有在窗口視野內(nèi)播演，那么這張圖片之后的圖片肯定也不在視野內(nèi)感局，所以跳出循環(huán)唧领，不必對之后的圖片進行檢測歉摧。
break;
}
}
}
}
function g(s){ // .a 或者 #a
// 以.開頭還是以#開頭
let method = /\./.test(s) ? 'getElementsByClassName' : 'getElementById';
return document[method](s.substr(1));
}
</script>
</body>
</html>
