用js实现图片的懒加载

1.布局

<div class="box">

    </div>
    <div class="imgbox">
        <img data-img="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2384200885,2252030111&fm=11&gp=0.jpg" src="image/baseimg.png" alt="">
        <img data-img="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2384200885,2252030111&fm=11&gp=0.jpg" src="image/baseimg.png" alt="">
        <img data-img="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2384200885,2252030111&fm=11&gp=0.jpg" src="image/baseimg.png" alt="">
        <img data-img="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2384200885,2252030111&fm=11&gp=0.jpg" src="image/baseimg.png" alt="">
        <img data-img="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2384200885,2252030111&fm=11&gp=0.jpg" src="image/baseimg.png" alt="">
        <img data-img="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2384200885,2252030111&fm=11&gp=0.jpg" src="image/baseimg.png" alt="">
        <img data-img="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2384200885,2252030111&fm=11&gp=0.jpg" src="image/baseimg.png" alt="">
        <img data-img="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2384200885,2252030111&fm=11&gp=0.jpg" src="image/baseimg.png" alt="">
    </div>

2.书写样式

<style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            height: 800px;
        }
        .imgbox {
            width: 960px;
            margin: auto;
            border-top: 1px solid #000;
        }
        .img box {
            width: 190px;
            margin: 5px;
        }
    </style>

3.js代码

<script>
        /*
        * 检测距离
        * */
        var box  = document.querySelector(".imgbox");
        window.onscroll = function () {
            if (checkBool()){
               setTimeout(function(){
                    for (var i = 0 ;i < box.children.length; i++){
                        box.children[i].src = box.children[i].getAttribute("data-img");
                    }
                },1000)
            } 
        }
        //检测方法
         function checkBool() {
             return box.offsetTop-window.scrollY<=document.documentElement.clientHeight;
         }   

    </script>