图片懒加载

r囧r小猫 2022-05-21 06:54 528阅读 0赞

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>LazyLoad</title>
        <style type="text/css">
            img {
                display: block;
                width: 500px;
                height: 400px;
            }
        </style>
    </head>
    <body>
        <img src="" guoyu-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="" guoyu-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="" guoyu-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="" guoyu-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="" guoyu-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="" guoyu-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="" guoyu-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">
            var aImg = document.querySelectorAll('img');
            var len = aImg.length;
            var n = 0;//存储图片加载到的位置，避免每次都从第一张图片开始遍历
            window.onscroll = function() {
                var seeHeight = document.documentElement.clientHeight;
                var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
                for (var i = n; i < len; i++) {
                    if (aImg[i].offsetTop < seeHeight + scrollTop) {
                        if (aImg[i].getAttribute('src') == '') {
                            aImg[i].src = aImg[i].getAttribute('guoyu-src');
                        }
                        n = i + 1;
                        console.log('n = ' + n);
                    }
                }
            };
        </script>
    </body>
    </html>

--------------------

*   *   *  [CSS代码][CSS]
         *  [HTML代码][HTML]
         *  [JS代码][JS]
         *  [完整代码][Link 1]

--------------------

### CSS代码 ###

只是设置图片的一些样式：

### HTML代码 ###

1.png是一个1\*1px的透明图或者带有logo，这样加载快，测试效果的话无所谓，只要能区分开路径不一样就行，jpg 格式图是实际应该加载的图片路径，两个图显示的宽高要一致。data-url存放图片实际路径：

### JS代码 ###

原理：滚动至\#two内容显示出来时，让\#two内的图片路径改为实际路径：

### 完整代码 ###

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" />
        <title>图片懒加载</title>
    </head>
    <style>
        *{margin: 0;padding: 0;}
        img{width: 48%;height: 150px;display: inline;border: 1px solid #ccc;}
    </style>
    <body>
    <div id="div">
        <div id="one">
            <img class="img" data-url="img/1.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/2.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/3.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/4.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/5.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/1.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/1.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/1.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/1.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/1.jpg" src="img/2.png" alt=""> </div> <div id="two"> <img class="img" data-url="img/6.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/7.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/8.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/2.jpg" src="img/2.png" alt=""> </div> </div> <script> //首次进入触发判断 getList(); function getList(){ //第一次显示的图片列表高度 var contentHeight = document.getElementById('one').offsetHeight; //设备可用高度 var availHeight = window.screen.availHeight; //如果不滚动two直接被显示出来 if (contentHeight<availHeight){ //遍历#one下的img，然后替换路径 for(var x = 0;x < document.querySelectorAll('#one .img').length;x++){ var imgUrl = document.querySelectorAll('#one .img')[x].getAttribute('data-url'); var img = new Image(); img.src = imgUrl; img.onload = (function(e){ document.querySelectorAll('#one .img')[x].src = document.querySelectorAll('#one .img')[x].getAttribute('data-url'); })(); } //遍历#two，然后替换路径 for(var x = 0;x < document.querySelectorAll('#two .img').length;x++){ var imgUrl = document.querySelectorAll('#two .img')[x].getAttribute('data-url'); var img = new Image(); img.src = imgUrl; img.onload = (function(e){ document.querySelectorAll('#two .img')[x].src = document.querySelectorAll('#two .img')[x].getAttribute('data-url'); })(); } }else { //遍历#one下的img，然后替换路径 for(var x = 0;x < document.querySelectorAll('#one .img').length;x++){ var imgUrl = document.querySelectorAll('#one .img')[x].getAttribute('data-url'); var img = new Image(); img.src = imgUrl; img.onload = (function(e){ document.querySelectorAll('#one .img')[x].src = document.querySelectorAll('#one .img')[x].getAttribute('data-url'); })(); } } } //#two显示的次数 0是第一次显示 var twoShowTime = 0; //滚动事件 window.onscroll = function(){ if (twoShowTime == 0){ scroll(); } }; //滚动判断图片是否加载 function scroll() { //#content的高度 var contentHeight = document.getElementById('one').offsetHeight; //设备可用高度 var availHeight = window.screen.availHeight; //滚动的高度 var scrollHeight = document.body.scrollTop; //判断如果显示出来了#two if (scrollHeight > contentHeight - availHeight) { //遍历#two下的img，然后替换路径 for (var x = 0; x < document.querySelectorAll('#two .img').length; x++) { var imgUrl = document.querySelectorAll('#two .img')[x].getAttribute('data-url'); var img = new Image(); img.src = imgUrl; img.onload = (function () { document.querySelectorAll('#two .img')[x].src = document.querySelectorAll('#two .img')[x].getAttribute('data-url'); })(); } twoShowTime = 1; } } </script> </body> </html>

[CSS]: https://blog.csdn.net/github_37125043/article/details/72174017#css%E4%BB%A3%E7%A0%81
[HTML]: https://blog.csdn.net/github_37125043/article/details/72174017#html%E4%BB%A3%E7%A0%81
[JS]: https://blog.csdn.net/github_37125043/article/details/72174017#js%E4%BB%A3%E7%A0%81
[Link 1]: https://blog.csdn.net/github_37125043/article/details/72174017#%E5%AE%8C%E6%95%B4%E4%BB%A3%E7%A0%81