懒加载原理

懒加载，就是用到了再进行加载操作，淘宝下方的商品展示一直都是滚动不完的，因为数据很多，有时候滚动下去后发现图片还在加载，这就运用到懒加载，不使用懒加载会导致最开始进入页面时进行的请求过于繁杂，导致加载缓慢，并且浪费流量加载一些没必要显示的图片信息。

对于懒加载的使用，一般是显示在图片方面，对于图片被滚动到可视区域时，进行懒加载操作。

首先先了解窗口的可视区域，懒加载用到了三个滚动的API

document.documentElement.clientHeight//获取屏幕可视区域的高度
HtmlElement.offsetTop // 获取浏览器窗口顶部到目标图片顶部的距离
Element.scrollTop //滚动了多少距离

通过上面的图片可以进行理解，当offsetTop-scroolTop<clientHeight，图片就滚动到当前的可视区域，进行请求操作此处对于原生js进行编写例

 1     <img data-src="./images/1.jpg" alt="">
 2     <img data-src="./images/2.jpg" alt="">
 3     <img data-src="./images/3.jpg" alt="">
 4     <img data-src="./images/4.jpg" alt="">
 5     <img data-src="./images/5.jpg" alt="">
 6     <img data-src="./images/6.jpg" alt="">
 7     <img data-src="./images/7.jpg" alt="">
 8     <img data-src="./images/8.jpg" alt="">
 9     <img data-src="./images/9.jpg" alt="">
10     <img data-src="./images/10.jpg" alt="">
11     <img data-src="./images/1.jpg" alt="">
12     <img data-src="./images/2.jpg" alt="">

 1 //对全部图片进行选中
 2 var imgs = document.querySelectorAll('img');
 3 
 4 //offsetTop是元素与offsetParent的距离，循环获取直到页面顶部，此处时为了滚动而更新图片位置
 5 //offsetTop是相对于父元素的，所以需要加上一个offsetParent
 6 function getTop(e) {
 7     var T = e.offsetTop;
 8     while(e = e.offsetParent) {
 9         T += e.offsetTop;
10     }
11     return T;
12 }
13 
14 //懒加载方法
15 function lazyLoad(imgs) {
16     var H = document.documentElement.clientHeight;//获取可视区域高度
17     var S = document.documentElement.scrollTop || document.body.scrollTop; //获取滚动了多少高度
18     for (var i = 0; i < imgs.length; i++) {
19         //当可视区域高度+滚动了多少的高度大于图片本身位于页面顶部的高度
20         if (H + S > getTop(imgs[i])) {
21             imgs[i].src = imgs[i].getAttribute('data-src');
22         }
23     }
24 }
25 
26 //在滚动条滚动的时候判断触发
27 window.onload = window.onscroll = function () { 
28     lazyLoad(imgs);
29 }

 现阶段市面上的组件库一般都自带懒加载的方式，上面也是其中一种方式，因为频繁的滚动会造成高强度的请求操作，可以进行防抖操作