图片懒加载

作者: qhaobaba | 来源:发表于2017-07-06 10:13 被阅读0次

项目优化
JS
图片懒加载
图片懒加载
js 实现图片懒加载
图片懒加载和预加载
selenuim和phantonJs处理网页动态加载数据的爬取
懒加载和瀑布流
jquery懒加载、回到顶部
懒加载和预加载

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
img{
display: block;
width: 500px;
height: 300px;
}
div{
margin: 500px 0 0 40px;
}
</style>
</head>
<body>
<div id="banner">
<img data-src="image/01.jpeg">
<img data-src="image/02.jpeg">
<img data-src="image/03.jpeg">
<img data-src="image/04.jpeg">
<img data-src="image/05.jpg">
<img data-src="image/06.png">
<img data-src="image/07.png">
<img data-src="image/08.png">
</div>

    <script type="text/javascript">
        window.onload=function(){
            var banner=document.getElementById("banner");
            var imgs=banner.getElementsByTagName("img");
             add();//页面加载完成先执行一次
            function getTop(obj){ //写一个方法获取图片距离top的值
                var t=0;     　//定义一个保存top值的 变量
                while(obj){　　//循环获取每个父级定位的top值
                    t+=obj.offsetTop;  //获取传入或改变父级定位的top值，当到大body的时候没有 他的父级定位为null所以就停了
                    obj=obj.offsetParent; //获取obj的父级定位
                    console.log(t)
                    console.log(obj)
                }
                return t;
            }
            function add(){
                var S = document.documentElement.scrollTop || document.body.scrollTop; //获取滑动条距top的值
                var H = window.innerHeight; //获取显示区域高度（只读）
                for(var i=0;i<imgs.length;i++){  //循环图片
                    if((S+H) > getTop(imgs[i])){ 判断图片是否进入可视区域
                        imgs[i].setAttribute("src",imgs[i].getAttribute("data-src")); //当进入的时候给src 赋值
                    }
                }
            }
             
            window.onscroll=function(){ //每次滚动运行方法判断
                add()
            }
        }
             
             
             
         
    </script>
</body>

</html>