图片懒加载

所谓图片懒加载，就是想让页面在展示图片的时候，不一下子全部开始加载，而是等到屏幕快滑到该图片的时候，再开始加载，这样做的好处，提高网页加载效率，节省用户流量  

那么什么时候开始加载呢？

已加载高度 + 屏幕高度 >= 未加载区域-20

说明下面未加载区域已经窜到屏幕上了，此时不加载，更待何时呢？？？？

// 1、当加载时执行的函数

window.onload = function(）{

// 2、当加载时执行 懒加载函数

function load(){

//  3、获取屏幕设备的高度  兼容谷歌 || IE

var clientH = document.documentElement.clineHeight || document.body.clientHeight;

// 4、获取已加载的高度  兼容谷歌  || IE

var scroolh = document.documentElement.scrollHeight || document.body.clientHeight;

// 5、获取所有图片 遍历

var images = document.getElemetsByClassName('images');

//6、找到图片中的每一个 判断

for (var img of images){

// 7、找到当前图片  已加载高度+设备屏幕高度 ≥ 未加载至已加载上方的区域或者-20 提前

执行  &&并且下面得有   img.getAttribute('data-realSrc')这个

if（( clientH+scroolh) ≥ img .offsetTop-20 && img.getAttribute('data-realSrc')）{

// 8、找到html里真实路径 自己定义的属性

var realSrc = img.getAttribute('date-realSrc');

// 9、替换路径

img.src=realSrc;

// 10 、直接把这个真实路径属性删除           Attribute删除指定属性

img.removeAttribute('data-realSrc');

         }
   }

}

// 11、不能到滚动了才 加载 上来就必须先加载一次才行

load( );

// 12、当页面滚动的时候 再次加载函数 懒加载

~load+（）是为了防止每次滚动都请求一次

也可以不+ （）用remove也就是7的后半部分和10 删除

window.onscroll = load;