图片懒加载？

1、图片懒加载理解思路

1､设置图片src属性为同一张图片，同时自定义一个data-src属性来存储图片的真实地址
2､ 页面初始化显示的时候或者浏览器发生滚动的时候判断图片是否在视野中
3､ 当图片在视野中时，通过js自动改变该区域的图片的src属性为真实地址

2、图片懒加载的代码实现

 //querySelectorAll在文档内找全部符合选择器描述的节点包括Element本身。
 let lazyImages = [...document.querySelectorAll('.lazy-image')]
 let inAdvance = 300 // 自定义一个高度，当距离300px到达图片时加载
 function lazyLoad() {
	lazyImages.forEach(image => {
	 // offsetTop目标元素到body的top距离 
	 // innerHeight返回窗口的文档显示区的高度  
	 // pageYOffset返回文档在窗口垂直方向滚动的像素。
	 if (image.offsetTop < window.innerHeight + window.pageYOffset + inAdvance) { 
	 // 距离xxpx时加载图片
	 //赋值真实的图片路径
	 image.src = image.dataset.src
	 //onload页面加载完成    
	 // classList.add( 'newClassName' )添加新的类名，如已经存在，取消添加
	 // classList.contains( 'oldClassName' )确定元素中是否包含指定的类名，返回值为true 、false；
	 // classList.remove( 'oldClassName' )移除已经存在的类名;
	 // classList.toggle( 'className' )如果classList中存在给定的值，删除它，否则，添加它；
	 image.onload = () => image.classList.add('loaded')
			 }
		 })
	 }
	 lazyLoad()
	 //addEventListener 事件监听   _.throttle数据节流
	 window.addEventListener('scroll', _.throttle(lazyLoad, 16)) // 用到了lodash的节流函数
	 window.addEventListener('resize', _.throttle(lazyLoad, 16))