图片懒加载原理-实例二

接着上面做一下补充：

1、dataset的用法，与attribute的区别

2、获取图片到页面顶部高度的正确方法

3、怎样处理已经显示的图片重复遍历的问题

4、 scroll事件的触发频率很快，怎么减小其处理函数的调用频率

与dataset和getAttribute

1、它是html5自定义属性，低版本浏览器不兼容

2、html标签中定义：data-属性名，可设置多个

3、js中typeof img.dataset，值为object；

　　获取所有自定义属性：img.dataset

　　获取某个属性：img.dataset[属性名]

　　添加某个属性：img.dataset[属性名]=值

　　删除某个属性：delete img.dataset.属性名

4、与getAttribute和setAttribute相比，dataset更具语义化，代码更简洁

获取图片到页面顶部高度的正确方法

function getTop(obj) {
        var h = 0;
        while (obj) {
            h += obj.offsetTop;
            obj = obj.offsetParent;
        }
        return h;
}

offsetParent(定位父级)的定义：与当前元素最近的非默认定位(position是static)的父级元素

已加载的图片不再遍历

var img = document.getElementsByTagName('img'),
      n = 0;
function lazyLoad() {
	var top =document.documentElement.clientHeight + (document.documentElement.scrollTop || document.body.scrollTop);
	for (var i = n;  i < img.length;  i++) {
		if (getTop(img[i]) < top) {
			setSrc(img[i]);
			n=i;
		}
 	}
}

最终效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .imgbox {
            width: 100%;
            min-height: 150px;
            margin: 20px 0;
            border: 1px solid red;
        }

        .imgbox img {
            width: 100%;
        }

    </style>
</head>
<body>
<div class="imgbox"><img data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"/></div>
<div class="imgbox"><img data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p01N203pHTU7/Wr5314kcLAtVCi.jpg!t"/></div>
<div class="imgbox"><img data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"/></div>
<div class="imgbox"><img data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p01a3SXHo2hZ/XYAC5TLk4uYWXn.jpg!t"/></div>
<div class="imgbox"><img data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"/></div>
<div class="imgbox"><img data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"/></div>
<div class="imgbox"><img data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"/></div>
<div class="imgbox"><img data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"/></div>
<div class="imgbox"><img data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"/></div>
<div class="imgbox"><img data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"/></div>
<div class="imgbox"><img data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"/></div>
<div class="imgbox"><img data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"/></div>
<div class="imgbox"><img data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"/></div>
<div class="imgbox"><img data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"/></div>
<div class="imgbox"><img data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"/></div>
<div class="imgbox"><img data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"/></div>
<div class="imgbox"><img data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"/></div>
<div class="imgbox"><img data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"/></div>
<div class="imgbox"><img data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"/></div>
<div class="imgbox"><img data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"/></div>
<div class="imgbox"><img data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"/></div>
<div class="imgbox"><img data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"/></div>
<div class="imgbox"><img data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"/></div>
<div class="imgbox"><img data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"/></div>
<div class="imgbox"><img data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"/></div>
<div class="imgbox"><img data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"/></div>
<div class="imgbox"><img data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"/></div>
<div class="imgbox"><img data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"/></div>
<div class="imgbox"><img data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"/></div>
<div class="imgbox"><img data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"/></div>
<div class="imgbox"><img data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"/></div>
<div class="imgbox" style="position:relative"><img data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"/></div>
<div class="imgbox" style="position:relative"><img data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"/></div>
<div class="imgbox" style="position:relative"><img data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"/></div>
<div class="imgbox" style="position:relative"><img data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"/></div>
<div class="imgbox" style="position:relative"><img data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"/></div>

</body>
<script>

    var img = document.getElementsByTagName('img');
    var n = 0;

    function getTop(obj) {
        var h = 0;
        while (obj) {
            h += obj.offsetTop;
            obj = obj.offsetParent;
        }
        return h;
    }


    function setSrc(imgNode){
        var src='';
        if (imgNode.dataset) {
            src=imgNode.dataset.src;
        } else {
            src=imgNode.getAttribute('data-src');
        }
        imgNode.src=src;
    }

    function lazyLoad() {
        var top =document.documentElement.clientHeight + (document.documentElement.scrollTop || document.body.scrollTop);
        for (var i = n; i < img.length; i++) {
            console.log(top);
            if (getTop(img[i]) < top) {
                setSrc(img[i]);
                n=i;
            }
        }
    }

    window.onscroll = lazyLoad;
    window.onload=function () {
        window.onscroll();
    }


</script>
</html>

View Code

发现还有一个问题没有处理： scroll事件的触发频率很快，怎么减小其处理函数的调用频率，请看下一篇节流函数的介绍