懒加载的原理及实现

一、什么是懒加载？

懒加载就是延迟加载。针对多图片的页面，只有当该图片出现在页面视区中，再加载该图片。可以防止页面一次性加载完所有的图片，用户等待时间长，影响用户体验。

二、如何实现懒加载

1.将页面中所有的src属性设置为空，并将src属性真正的值存放在自定义属性data-originnal（自定义属性以data-开头）。
2.为页面中的图片设置好大小，防止引起页面的回流，影响性能。
3.判断元素是否进入用户视野中。（利用元素的offsetTop属性和scrollTop、clientTop之间的关系判断），若进入视野，则将data-originnal属性的值赋给图片的src属性。
4.滚动，重复判断元素是否进入视野。

三、具体实现
1.html模块

<img data-original="mogu.jpg" alt="" class="picture" src=""  >

2.判断元素是否进入视野

if(scrollTop+height>offsetTop){
	var img= new Image();//跨域异步请求图片
	img.onload=function(){
		console.log(1);
		item.src=img.src;
	}
	img.src=item.data-originnal
}

四、完整代码图片描述

五、代码的其他问题

判断元素是否在可视区域时，会重复判断元素，造成浪费

六、使用echo.js库实现预加载

echo.js使用原生js编写，不需要依赖其他库，可以独立使用。（lazyload是jQuery插件，使用时必须引入jquery）
1.引入js

<script src="https://cdn.bootcss.com/echo.js/1.7.3/echo.js"></script>

2.设置图片的自定义属性为data-echo
3.使用:获取元素并调用init()方法，接收一个对象，对象参数如下
offset：图片在可视区域下方一段距离时，开始加载。
throttle：图片延迟多少秒后加载
unload：是否卸载在可视区域外面的图片，默认为false。

echo.init({
	offset:0;
	throttle:0;
	unload:true;
	callback:function(element,top){
		
	}
})