16.原生JS实现图片懒加载

作者: Ching_Lee | 来源:发表于2018-04-06 16:32 被阅读0次

图片懒加载
16.原生JS实现图片懒加载
原生JS实现图片懒加载
原生JS实现图片懒加载
原生 JS 实现图片懒加载
原生js实现图片懒加载
原生JS实现图片懒加载(lazyload)
原生js 图片懒加载
原生js 图片懒加载
JS 原生图片懒加载

懒加载是前端优化的有效方式，如果一次ajax请求了10张图片的地址，如果一次性把10张图片都加载出来，首先会加载的很慢，第二浪费流量。
懒加载实现原理：
先把img的src指向空或者一个小图片，真实的地址存储在data-src自定义的属性中，

< img src=”” data-src=”http://real.com/real.jpg” />,

等到此图片出现在视野范围内了，获取img元素，把data-src里的值赋给src。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        img {
            display: block;
            width: 500px;
            height: 400px;
        }
    </style>
</head>
<body>
<img src="" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158197&di=8845befd9fbda1e99e565b9c2298be50&imgtype=0&src=http%3A%2F%2Fuploads.xuexila.com%2Fallimg%2F1503%2F626-15031G42255b3.jpg">
<img src="" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158196&di=4a38d248001c145c5b4dd31474dedf41&imgtype=0&src=http%3A%2F%2Fpic29.nipic.com%2F20130512%2F11178195_152908769116_2.jpg">
<img src="" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158196&di=b39e8b14d214b7aa518d7a8328939efb&imgtype=0&src=http%3A%2F%2Fimage16-c.poco.cn%2Fmypoco%2Fmyphoto%2F20141114%2F12%2F4567377520141114124637053.jpg%3F1024x684_120">
<img src="" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158196&di=f2e7a6ffbfa3f92025c91e6180b5e317&imgtype=0&src=http%3A%2F%2Ffile31.mafengwo.net%2FM00%2F3F%2F26%2FwKgBs1gXBQuAPWGGABOK4vbGpt412.groupinfo.w600.jpeg">
<img src="" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158195&di=6a073a070b9cea1214efc0994ed6dde1&imgtype=0&src=http%3A%2F%2Fimages3.ctrip.com%2Fwri%2Fimages%2F200610%2F100602312604121954734.jpg">
<img src="" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158195&di=a9436d83f55b301d1df9cd24f6e367e7&imgtype=0&src=http%3A%2F%2Fcyjctrip.qiniudn.com%2F69015%2F1379755311203p184vt4juft5p1t8q1andgp5ijn11.jpg">
<img src="" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158195&di=2b6bc6b871d4f7f267169dfcfb727f84&imgtype=0&src=http%3A%2F%2Fcyjctrip.qiniudn.com%2F106357%2F1395933091608p18k21ek6kvj1gv2ta910kn1002m.jpg">


<script type="text/javascript">
    let aImg = document.querySelectorAll('img');
    let len = aImg.length;
    let n = 0;//存储图片加载到的位置，避免每次都从第一张图片开始遍历
    let timeId;
    //首屏加载
    let seeHeight = document.documentElement.clientHeight;
    let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    for (let i = n; i < len; i++) {
        if (aImg[i].offsetTop < seeHeight + scrollTop) {
            if (aImg[i].getAttribute('src') == '') {
                aImg[i].src = aImg[i].getAttribute('data-src');
            }
            n = i + 1;
            console.log('n = ' + n);
        }
       else
             break;
    }
    //使用定时器实现节流
    window.onscroll = function() {
       if(timeId)
           clearTimeout(timeId);
       timeId=setTimeout(callback,300);
    };

    function callback() {
        let seeHeight = document.documentElement.clientHeight;
        let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
     
          for (let i = n; i < len; i++) {
            if (aImg[i].offsetTop < seeHeight + scrollTop) {
                if (aImg[i].getAttribute('src') == '') {
                    aImg[i].src = aImg[i].getAttribute('data-src');
                }
                n = i + 1;
                console.log('n = ' + n);
            }
            else
                 break;
        }

    }
</script>
</body>
</html>