懒加载的实现原理

在我们浏览电商网站时，商品的图片多之又多，这样一下加载那么多的图片服务器的压力就很大，不仅影响渲染速度，还浪费宽带。为了解决这个问题，提升客户端的体验，出现了懒加载方式来减轻服务器的压力，优先加载可视区域的内容，其他不部分进入可视区再加载。

懒加载原理

浏览器是否发送请求是根据的src属性，懒加载的关键在于图片没有进入可视区域时，先不给的src赋值，这样就不会发送请求了，等图片进入可视区时再给src给值。

懒加载实现的思路

1.加载loading图片
2.重点在于判断哪些图片需要加载（进入可视区的部分需要加载）
3.隐形加载图片
4.替换图片

1.加载loading图片即在html部分实现的也可以在js里动态加入(如果图片数据量大的情况下)

   <div class="imglist">
    <img  class="lazy"  src="src/img/loading.gif"  data-src="src/img/01.jpg" alt="">
    <img  class="lazy"  src="src/img/loading.gif"  data-src="src/img/03.jpg" alt="">
    <img  class="lazy"  src="src/img/loading.gif"  data-src="src/img/04.jpg" alt="">
    <img  class="lazy"  src="src/img/loading.gif"  data-src="src/img/05.jpg" alt="">
    <img  class="lazy"  src="src/img/loading.gif"  data-src="src/img/06.jpg" alt="">
    <img  class="lazy"  src="src/img/loading.gif"  data-src="src/img/09.jpg" alt="">
    <img  class="lazy"  src="src/img/loading.gif"  data-src="src/img/10.jpg" alt="">
    <img  class="lazy"  src="src/img/loading.gif"  data-src="src/img/10.jpg" alt="">
    <img  class="lazy"  src="src/img/loading.gif"  data-src="src/img/10.jpg" alt="">
    <img  class="lazy"  src="src/img/loading.gif"  data-src="src/img/10.jpg" alt="">
    <img  class="lazy"  src="src/img/loading.gif"  data-src="src/img/10.jpg" alt="">
    </div>

判断图片是否需要加载是关键点，即如何判断图片是否进入可视区域
用一张图来概括，从图上看我们可以知道当图片距离顶部的距离：top - height = 可视区域的高度+ 滚动区域高度s时说明图片马上就要进入可视区了，就是说当top-height<=s+h时，图片在可视区。
实际懒加载之前我们必须要了解几个挨批函数：
网页可见区域宽： document.body.clientWidth;
网页可见区域高： document.body.clientHeight;
网页可见区域宽： document.body.offsetWidth (包括边线的宽);
网页可见区域高： document.body.offsetHeight (包括边线的宽);
网页正文全文宽： document.body.scrollWidth;
网页正文全文高： document.body.scrollHeight;
网页被卷去的高： document.body.scrollTop;
网页被卷去的左： document.body.scrollLeft;
网页正文部分上： window.screenTop;
网页正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的宽： window.screen.width;

实现效果的js代码：

window.onload = function(){
	//获取图片列表
	 var imgs = document.querySelectorAll('img');
	 //获取到浏览器顶部的距离
	 function getTop(e){
	 	return e.offsetTop;
	 } 
	 // 懒加载的过程
	 function lazy(imgs){
	 	// 定义可视区高度
	 	var  h = window.innerHeight;
	 	//滚动区的高度
	 	var s = document.documentElement.scrollTop || document.body.scrollTop;
	 	for(var i = 0;i<imgs.length;i++){
	 		//图片距离顶部的距离大于可视区和滚动区域之和时懒加载
	 		if((h+s)>getTop(imgs[i])){
	 			// 页面开始有两秒时空白的，使用settimeout定时2s
	 			(function(i){
	 				setTimeout(function(){
	 				      // 创建一个临时图片，这个图片在内存中单不会渲染到页面上去。实现隐形加载
	 				      var temp =new Image();
	 				      temp.src = imgs[i].getAttribute('data-src');//只请求一次
	 				      temp.onload = function(){
	 				      	// 获取自定义属性data-src ，用真实图片替换加图片
	 				      	imgs[i].src = imgs[i].getAttribute('data-src')
	 				      }

	 				},2000)
	 			})(i)
	 		}
	 	}
	 }
	 lazy(imgs);
	 //滚屏函数
	 window.onscroll = function(){
	 	lazy(imgs);
	 }
}

效果：