圖片懶加載

    <div>
	    <img src="1.png" data-src='http://img07.tooopen.com/images/20170316/tooopen_sy_201956178977.jpg'>
	</div>
	<div>
		<img src="1.png" data-src='http://img07.tooopen.com/images/20170316/tooopen_sy_201956178977.jpg'>
	</div>
	<div>
		<img src="1.png" data-src='http://img07.tooopen.com/images/20170316/tooopen_sy_201956178977.jpg'>
	</div>
	<div>
		<img src="1.png" data-src='http://img07.tooopen.com/images/20170316/tooopen_sy_201956178977.jpg'>
	</div><div>
		<img src="1.png" data-src='http://img07.tooopen.com/images/20170316/tooopen_sy_201956178977.jpg'>
	</div>
	<div>
		<img src="1.png" data-src='http://img07.tooopen.com/images/20170316/tooopen_sy_201956178977.jpg'>
	</div>
	<div>
		<img src="1.png" data-src='http://img07.tooopen.com/images/20170316/tooopen_sy_201956178977.jpg'>
	</div>
	<div>
		<img src="1.png" data-src='http://img07.tooopen.com/images/20170316/tooopen_sy_201956178977.jpg'>
	</div>

	<script type="text/javascript">
		var img = document.querySelectorAll('img');
		var imgs = Array.from(img);
		imgs.forEach(function(item,index){
			if(item.offsetTop<window.innerHeight){
				item.src = item.dataset.src;
			}
		})
		window.onscroll=function(){
			imgs.forEach(function(item,index){
				let height = window.getComputedStyle(imgs[0],null).getPropertyValue('height').replace('px','');
				if(item.offsetTop<(window.pageYOffset+window.innerHeight-200)){      //(item.offsetTop+height)>window.pageYOffset&&
					item.src = item.dataset.src;
				}else{
					item.src='1.png'
				}
			})
		}
    </script>