懒加载的原理及实现

懒加载？

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

二、如何实现懒加载

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){
		
	}
})