js图片懒加载

Document


*{
margin: 0;padding:0;list-style: none;
}
ul{
overflow: hidden;
width: 800px;
margin:0 auto;
}
li{
width: 50%;
height:500px;
border:1px solid #ccc;
box-sizing:border-box;
float:left;
overflow: hidden;
position: relative;
}
li i{
width:20px;
height:20px;
border-radius:50%;
position: absolute;
border:2px solid #f60;
left: 50%;
top:50%;
margin-top:-11px;
margin-left:-11px;
animation:move 1s infinite;
}
li i:before{
position: absolute;
width: 5px;
height: 5px;
border-radius:50%;
content: “”;
box-shadow: :0 0 10px #666;
background: #fff;
border:1px solid #fff;
top:-3px;
left: 50%;
margin-left: -3px;
}
img{
vertical-align: middle;
position: relative;
width: 100%;
height: 500px;
}
@keyframes move{
0%{
transform:rotateZ(0);
}
100%{
transform:rotateZ(360deg);
}
}

• 
  

<script src="jquery-1.8.3.min.js"></script>

<script>
    var ul=document.getElementsByTagName("ul")[0];
    var uli=document.getElementsByTagName("li");
    //创建img标签
    function creatImg(obj){
        var src="";
        if(obj.dataset.src){
            src=obj.dataset.src;
        }else{
            src=obj.getAttribute('data-src');
        }
        if(obj.children.length<=1){
            var img=document.createElement('img');
            img.src=src;
            obj.appendChild(img);
        }
    }

    //获取每个li的offsetTop 
    function getTop(obj){
        var top=0;
        while(obj){
            top+=obj.offsetTop;
            obj=obj.offsetParent;
        }
        return top;
    }

    //绑定滚动条事件 判断滚动条距离大于每个li到页面顶部的距离，创建img

    window.onscroll=function(){
        var tops=document.documentElement.clientHeight + (document.body.scrollTop || document.documentElement.scrollTop);

        for(var i=0;i<uli.length;i++){
            if(getTop(uli[i])<tops){
                setTimeout('creatImg(uli['+i+'])',500);
            }
        }
    }
    //页面加载完执行一次滚动函数
    window.onload=function(){
        window.onscroll();
    }
</script>