图片懒加载主要是用于图片很多的时候，避免网站加载时一次性加载很多图片从而造成网站卡顿的现象，使图片随着鼠标滑动按需加载，提高用户体验。
思路：
先把图片路径设置成默认的占位图，把真实路径放到一个属性中，如data-src,通过检测窗口位置选择加载哪些图片。
<ul id="imgList">
<li><img src="default.jpg" data-src="1.jpg"/></li>
<li><img src="default.jpg" data-src="2.jpg"/></li>
<li><img src="default.jpg" data-src="3.jpg"/></li>
<li><img src="default.jpg" data-src="4.jpg"/></li>
<li><img src="default.jpg" data-src="5.jpg"/></li>
<li><img src="default.jpg" data-src="6.jpg"/></li>
<li><img src="default.jpg" data-src="7.jpg"/></li>
<li><img src="default.jpg" data-src="8.jpg"/></li>
<li><img src="default.jpg" data-src="9.jpg"/></li>
.
.
.
<li><img src="default.jpg" data-src="99.jpg"/></li>
<li><img src="default.jpg" data-src="100.jpg"/></li>
</ul>
正如现在我有一个列表，有很多张图片，鼠标滚动浏览的时候随着浏览的高度确定加载的图片。
var imgList = document.getElementsByTagName("img");
var listLen = imgList.length;
var winHei = window.innerHeight;
var winScrollTop = 0;
imgShow();
function imgShow(){
winScrollTop = document.documentElement.scrollTop + winHei;
for(var i =0;i<listLen;i++){
scrennL = imgList[i].offsetTop;
if(scrennL <= winScrollTop){
let trueSrc = imgList[i].getAttribute("data-src");
imgList[i].setAttribute("src",trueSrc);
}
}
}
window.onscroll = function(){
show();
}
