图片懒加载

图片懒加载html部分：

<div>
        
    <div>
        <img src="img/timg.gif" data-src="img/1550218501.png"/>    
    </div>
    <div>
        <img src="img/timg.gif" data-src="img/1550218501.png"/>    
    </div>
    <div>
        <img src="img/timg.gif" data-src="img/1550218501.png"/>    
    </div>
    <div>
        <img src="img/timg.gif" data-src="img/1550218501.png"/>    
    </div>
    <div>
        <img src="img/timg.gif" data-src="img/1550218501.png"/>    
    </div>
    <div>
        <img src="img/timg.gif" data-src="img/1550218501.png"/>    
    </div>
    <div>
        <img src="img/timg.gif" data-src="img/1550218501.png"/>    
    </div>
    <div>
        <img src="img/timg.gif" data-src="img/1550218501.png"/>    
    </div>
    
    <div>
        <img src="img/timg.gif" data-src="img/1550218501.png"/>    
    </div>    
</div>

                div{
                    text-align: center;
                }
                img{
                    width: 300px;
                    height:300px;
                }

js 部分及注释：

window.onload=function(){
            var imgs=document.querySelectorAll('img'); //获取所有img
            function gettop(e){//获取 元素距离浏览器内顶的高度
                return e.offsetTop;
            }            
            function lazyload(){
            var h=window.innerHeight; //获取浏览器内高
            var s=document.documentElement.scrollTop||document.body.scrollTop;//获取滚动的高度 
            for(let i=0;i<imgs.length;i++){
                if((h+s)>gettop(imgs[i])){//判断浏览器高度加上滚动高度是否大于img距离顶端的高度 及判断img是否在浏览器窗口显示出来                        
                    setTimeout(function(){//定时器模拟加载数据
                        var tmp=new Image();//创建img实例
                        tmp.src=imgs[i].getAttribute("data-src");//缓存加入实例
                        tmp.onload=function(){//真数据加载完毕后操作
                            imgs[i].src=imgs[i].getAttribute("data-src");//赋值
                        }
                        
                    },1000)    ;                                
                }
            }
            }            
            lazyload();            
            window.onscroll=function(){//滚动监听
            lazyload();
            }
            }

核心思想是滚动监听img是否出现在浏览器窗口内，出现及加载。