原生JS实现图片懒加载

当页面需要渲染很多的图片的时候。当DOM节点渲染完毕后，如果src已经赋值的话，都会向服务器发起http请求，去请求相应的图片资源。这样的话一方面服务器的压力将会非常大，加载页面的速度也会变慢。因此图片懒加载有利于提高性能。
实现步骤：

1. 为每一个img先不添加src属性或者用一张较小default.png代替；
2. 事先准备好图片的真实地址；
3. 根据当前的滚动情况，来决定是否要为default.png添加src属性，而且属性值为真实图片的地址。
原生javascript实现

//HTML
<div id="container">
     <img class="img"  alt="logo"/>
     <img class="img"  alt="logo"/>
     <img class="img"  alt="logo"/>
     <img class="img"  alt="logo"/>
     <img class="img"  alt="logo"/>
</div>
//CSS
#container{
     width:400px;
     height: 400px;
     border: 2px solid red;
     overflow-y: scroll;
 }
 img{
     width: 360px;
     height: 500px;
     display: block;
     border: 1px solid green;
 }
//JavaScript
let realImgURl = [
   './001.jpg',
   './girl.jpg',
   './timg.jpg',
   './001.jpg',
   './girl.jpg'
]
let container = document.getElementById('container');
function LazyLoad(){
	let n=0;
	let len = container.length;
	let scrollTop = container.scrollTop;
	let contentHeight = container.clientHeight;
	let imgDom = document.getElementsByTagName('img');
	for(let i=n;i<len;i++){
		if(imgDom[i].offsetTop <=scrollTop+contentHeight -100){
			imgDom[i].setAttribute("src",realImgURL[i]);
		} 
		n = i+ 1;
}
container.onscroll = function(){
       LazyLoad();
}

上述的-100意思是为了更清楚的看出图片懒加载的过程，让已经出现在可视范围内的图片稍后加载。