图片懒加载原理-实例三

整合前面的一些问题，还发现一些不足：

1、当滚动太快突然停止时，后面的图片不加载这更加类似immediate了，需要改进

2、用到了setTimeout，应该保证this的原有指向不变

3、节流函数用处较多，应该将它独立出来

<!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%;
        }
        input{
            position:fixed;
            width:80px;
            top:5px;
            z-index: 10;
        }
        .input1{
            left:5px;
        }
        .input2{
            left:100px;
        }
        .input3{
            left:190px;
        }
    </style>
</head>
<body>
<input class="input1" type="button" value="throttle">
<input class="input2" type="button" value="debounce">
<input class="input3" type="button" value="immediate">
<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'),
        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;
            }
        }
    }

    function rateControl(argus) {
        var delay=argus.delay || 500,
            callback=argus.callback || function () {},
            type=argus.type || 'throttle',
            safe=true,
            timer = null,
            context,
            args,
            startTime=+new Date(),
            curTime;
        function throttle(){
            context = this;
            args = arguments;
            curTime = +new Date();
            clearTimeout(timer);
            if (curTime - startTime >= delay) {
                callback.apply(context, args);
                startTime = curTime;
            } else {
                timer = setTimeout(function() {
                    callback.apply(context, args);
                }, delay);
            }
        }
        function debounce() {
            context = this;
            args = arguments;
            clearTimeout(timer);
            timer = setTimeout(function() {
                callback.apply(context, args);
            }, delay);
        }
        function immediate() {
            if (safe) {
                callback();
                safe = false;
            }
            clearTimeout(timer);
            timer = setTimeout(function() {
                safe = true;
            }, delay);
        }
        switch (type) {
            case 'throttle':
                return throttle;
            case 'debounce':
                return debounce;
            case 'immediate':
                return immediate;
        }
    }

    window.onscroll = rateControl({callback:lazyLoad});
    window.onload=function () {
        window.onscroll();
        var btn=document.getElementsByTagName('input');
        btn[0].onclick=function () {
            window.onscroll = rateControl({
                callback:lazyLoad,
                delay:1000,
                type:'throttle'
            });
        };
        btn[1].onclick=function () {
            window.onscroll = rateControl({
                callback:lazyLoad,
                delay:1000,
                type:'debounce'
            });
        };
        btn[2].onclick=function () {
            window.onscroll = rateControl({
                callback:lazyLoad,
                delay:1000,
                type:'immediate'
            });
        };
    }


</script>
</html>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/aredleave/p/7573147.html