js实现图片懒加载原理

**前言：**大型的电商网站中或图片网站中有大量的图片，如果每一个图片img标签都写一个图片地址，那么再浏览器上运行网页或者网站会有很慢的响应回来图片数据【如果在网速很慢的情况下】。

什么是懒加载？

懒加载也就是延迟加载。
当访问一个页面的时候，先把img元素或者其他元素背景图片路径替换一个1-2M的图片路径（这样的话浏览器就只会请求一次，也叫占位图），然后再img标签上自定义一个属性data-src【可以随意设置data-xx】，只有当图片出现再浏览器的可是区域时，才把自定义属性上的真正图片路径赋值给src，这就形成了图片懒加载。

懒加载原理？

页面中img元素，如果没有src属性，浏览器就不会发出请求下载图片，只有当设置了图片路径，浏览器才会发送请求。懒加载原理就是在所有可视区域看不见的img标签的src属性上放一个占位符，然后当拖动滚动条的时候判断图片距离浏览器顶部的距离等于浏览器可视区域距离+滚动条滚动的距离。

懒加载的优点

页面加载速度快，可以减轻服务器的压力，节约了流量，用户体验好。

懒加载代码

 let img = document.getElementsByTagName('img');
let n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历
lazyload(); 
window.addEventListener('scroll',lazyload);
function lazyload(){  //监听页面滚动事件
	var seeHeight = window.innerHeight;  //可见区域高度
	var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
	for(let i = n; i < img.length; i++){
		if(img[i].offsetTop < seeHeight + scrollTop){
			// if(img[i].getAttribute("src") == 'loading.gif'){
				img[i].src = img[i].getAttribute("data-src");
			// }
			n = i + 1;
		}
	}
}