图片懒加载

懒加载：页面渲染时不加载不在页面窗口内的资源，防止页面一次性向服务器响应大量请求导致服务器响应慢，页面卡顿或崩溃。优点：页面加载速度快、可以减轻服务器的压力、节约了流量,

图片懒加载思路

获得需要使用懒加载的DOM元素
计算视口高度 window.innerHeight || document.documentElement.clientHeight; //视口高度
懒加载函数：判断DOM元素是否在视口中，可以用ele.getBoundingClientRect().top 获得元素距离视口的高度，大于视口高度，即不加载，小于则加载
给window绑定滚动事件（第三步）

优化处理

对滚动事件进行节流处理
针对加载过的资源不在进行加载，做法是给每个DOM元素设置一个isReset属性，元素加载资源前是false，加载后是true，该属性也作为上面“思路中第三部的一个条件”
解除绑定：当所有的懒加载的元素的isReset属性的值都是true是，解除绑定
对于懒加载图片来说，可以先实例化一个Image()，设置src后等实例对象onload再给DOM元素设置stc，这样可以解决加载过程中图片显示空白

下面是对图片的懒加载，html中img的src的都是同一个基础资源，所以页面渲染之初对于图片资源只加载一次，真实的资源储可以存在img的自定义属性上，也可以储存在js的变量中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0 user-scalable=0">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            padding: 100px;
            border: 1px solid red
        }
        img{
             400px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div><span></span><img src="C:UsersAdministratorDesktopwhite.jpg" alt="" data_src='C:UsersAdministratorDesktopstrawberry.jpg'></div>
    <div><span></span><img src="C:UsersAdministratorDesktopwhite.jpg" alt="" data_src='C:UsersAdministratorDesktoporange.jpg'></div>
    <div><span></span><img src="C:UsersAdministratorDesktopwhite.jpg" alt="" data_src='C:UsersAdministratorDesktopgrape.jpg'></div>
    <div><span></span><img src="C:UsersAdministratorDesktopwhite.jpg" alt="" data_src='C:UsersAdministratorDesktopanana.jpg'></div>
    <div><span></span><img src="C:UsersAdministratorDesktopwhite.jpg" alt="" data_src='C:UsersAdministratorDesktopapple.jpg'></div>
</body>
<script>

// 区别于常见的懒加载的第地方是当img重置src后，向img添加了一个isReset属性，该属性实现两点作用：
// 1如果img都有这个属性，那么不会再对这个img设置src，
// 2如果所有img都有这个属性，那么window的滚动事件解除懒加载函数

var imgs = document.getElementsByTagName('img'); // 因为后续使用了数组的every，所以先转换为真实数组
var innerHeight = window.innerHeight || document.documentElement.clientHeight; //视口高度

function throttle(handler,wait){
    var lastTime = 0;
    return function(e){
        nowTmie = new Date().getTime();
        if(nowTmie - lastTime > wait){
            lastTime = nowTmie;
            handler.apply(this,arguments);
        }
    }
}

function lazyLoad(imgs, h){
    var h = h || 0; //  h是一个数值，加给视口高度，
    var isAllLoad = imgs.every(img => {  
        return img.getAttribute('isReset') == 'true';
    })
    if(isAllLoad){
        window.removeEventListener("scroll", throttleLazyLoad, false)
        return 
    }
    for (var i = 0; i < imgs.length; i++){
        var top = imgs[i].getBoundingClientRect().top; // img距离视口的高度
        var isLoad = imgs[i].getAttribute("isReset") // img的重置状态
        if(top < innerHeight + h && !isLoad){
            imgs[i].src = imgs[i].getAttribute('data_src');
            imgs[i].setAttribute('isReset', 'true');
        }
    }
}
lazyLoad(imgs) 
var throttleLazyLoad = throttle(lazyLoad, 100).bind(this, imgs, 500); // 节流的同时为了实现解除带参数的事件函数，选择了bind方法
window.addEventListener("scroll", throttleLazyLoad, false);

</script>   
</html>