懒加载

js 实现懒加载
原理：利用scrollTop+盒子的高度与图片的offsetTop进行比较，如果大于说明就在视窗内，将图片盒子的地址更改路径即可
代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lazyload</title>
    <style>
    #pictures{
        width: 900px;
        border: 1px solid #ccc;
        overflow: hidden;
    }
    .picture{
        float:left;
        width:250px;
        height:250px;
        margin: 10px 20px;
        border:1px solid #ccc;
 
    }
    </style>
    
</head>
<body>
    <div id="pictures">
        <img data-original="images/1.png" alt="" class="picture" src=""  >
        <img data-original="images/2.png" alt="" class="picture" src=""  >
        <img data-original="images/3.png" alt="" class="picture" src=""  >
        <img data-original="images/4.png" alt="" class="picture" src=""  >
        <img data-original="images/5.png" alt="" class="picture" src=""  >
        <img data-original="images/6.png" alt="" class="picture" src=""  >
        <img data-original="images/7.jpg" alt="" class="picture" src=""  >
        <img data-original="images/8.jpg" alt="" class="picture" src=""  >
        <img data-original="images/9.jpg" alt="" class="picture" src=""  >
        <img data-original="images/10.jpg" alt="" class="picture" src=""  >
        <img data-original="images/11.jpg" alt="" class="picture" src=""  >
        <img data-original="images/12.jpg" alt="" class="picture" src=""  >
        <img data-original="images/13.jpg" alt="" class="picture" src=""  >
        <img data-original="images/14.png" alt="" class="picture" src=""  >
        <img data-original="images/15.png" alt="" class="picture" src=""  >
        <img data-original="images/16.png" alt="" class="picture" src=""  >
        <img data-original="images/17.png" alt="" class="picture" src=""  >
        <img data-original="images/18.png" alt="" class="picture" src=""  >
        <img data-original="images/19.png" alt="" class="picture" src=""  >
        <img data-original="images/20.png" alt="" class="picture" src=""  >
        <img data-original="images/21.png" alt="" class="picture" src=""  >
        <img data-original="images/22.png" alt="" class="picture" src=""  >
        <img data-original="images/23.png" alt="" class="picture" src=""  >
        <img data-original="images/24.png" alt="" class="picture" src=""  >
 
    </div>
    <script>
        var images=document.getElementsByTagName('img');
        function lazyload() {
            Array.prototype.forEach.call(images,function(item,index) {
                var height=document.documentElement.clientHeight;                
                var scrollTop=document.documentElement.scrollTop;                
                var offsetTop=item.offsetTop;                
                //只要下方的图片滚动视图区域
                if(scrollTop+height>offsetTop){                    
                    //此处是加载图片 ，必须要
                    var img = new Image();                    
                    img.onload = function () {                               
                        item.src = img.src;
                    }
                    item.src = item.dataset.original;   
                }                            
            });  
            //以下方法是不能的  滚动的时候会全部一次性重新刷新图片
            /*for(var i = 0;i < images.length; i++){
                let item = images[i]
                var height=document.documentElement.clientHeight;                
                var scrollTop=document.documentElement.scrollTop;                
                var offsetTop=item.offsetTop;                
 
                if(scrollTop+height>offsetTop){                    
                    
                    var img = new Image();                    
                    img.onload = function () {                               
                        item.src = img.src;
                    }
                    img.src = item.dataset.original;   
                }              
            }*/
        }
        lazyload();                   //第一次加载页面时需要自动加载
 
        document.addEventListener("scroll",lazyload); 
 
    </script>
</body>
</html>