使用JS进行图片懒加载

本文原创，转载请注明出处

前几天修改了之前APP的一些功能，发现图片的加载太慢了，而且一个页面显示太多图片的话其他js什么的也都延迟了加载，造成事件方法未加载、操作无效果,用户体验差。原因除了图片显示的有点多之外还有我们的服务器限制的有下载速度，所以考虑到了图片的懒加载(这个思路也可以实现上拉加载)。

下面我只是简单实现了一下效果，抛砖引玉，想一次加载一个屏幕那么多图片的话也不难，需要的可以另外加入判断即可，这里就不再赘述：

2017-05-15 第一次编辑

2017-11-24 更新
看了一下之前写的这篇博客，发现有些地方写的比较马虎或者说瞎写，因为那个时候以为这样的需求已经足够用了，闲来无事看了下发现问题很大。已经更新，如果发现还有错误请留言。

---

---

CSS代码

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

<style>
    *{margin: 0;padding: 0;}
    img{width: 50%;display: inline-block;border: 1px solid #ccc;float: left;}
</style>

HTML代码

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

<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>

JS代码

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

<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方法里如果不是自调用函数，x会为循环之后的最大值，而不是0，1，2...
                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方法里如果不是自调用函数，x会为循环之后的最大值，而不是0，1，2...
                img.onload = (function () {
                    document.querySelectorAll('#two .img')[x].src = document.querySelectorAll('#two .img')[x].getAttribute('data-url');
                })();
            }
            twoShowTime = 1;
        }
    }
</script>

完整代码

<!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>