以下是本人写的懒加载demo，非常简单，供需要的朋友参考，不懂的地方欢迎留言。

一、什么是图片滚动加载？
　　通俗的讲就是：当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。
二、为什要使用这个技术？
　　比如一个页面中有很多图片，如淘宝、京东首页等等，如果一上来就发送这么多请求，页面加载就会很漫长，如果js文件都放在了文档的底部，恰巧页面的头部又依赖这个js文件，那就不好办了。更为要命的是：一上来就发送百八十个请求，服务器可能就吃不消了（又不是只有一两个人在访问这个页面）。
　　因此优点就很明显了：不仅可以减轻服务器的压力，而且可以让加载好的页面更快地呈现在用户面前（用户体验好）。

css

        <style>
            * {
                margin: 0;
                padding: 0;
            }

            .my {
                height: 300px;
                background-size: cover;
                border: 10px solid red;
            }

            .imgBox {
                width: 300px;
                height: 300px;
                text-align: center;
            }
        </style>

h5

<div class="my" style="width: 600px;"></div>
<div class="imgBox"><img class="img" src="img/ask1.png" _src="img/a1.png" alt=""></div>
<div class="imgBox"><img class="img" src="img/ask1.png" _src="img/a2.png" alt=""></div>
<div class="imgBox"><img class="img" src="img/ask1.png" _src="img/a3.png" alt=""></div>
<div class="imgBox"><img class="img" src="img/ask1.png" _src="img/a4.png" alt=""></div>
<div class="imgBox"><img class="img" src="img/ask1.png" _src="img/b1.png" alt=""></div>
<div class="imgBox"><img class="img" src="img/ask1.png" _src="img/b2.png" alt=""></div>
<div class="imgBox"><img class="img" src="img/ask1.png" _src="img/b3.png" alt=""></div>
<div class="imgBox"><img class="img" src="img/ask1.png" _src="img/b4.png" alt=""></div>

js

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
            function Lazy() {
                console.log(6);
                // 浏览器可视窗口高度+滚动条滚过的距离
                var scrollTopAndScroll = $(window).height() + $(window).scrollTop();
                for (let item of $('img')) {
                    //此时说明这图片已经在可视区域内，应该开始加载了
                    if ($(item).offset().top <= scrollTopAndScroll) {
                        $(item).attr("src", $(item).attr("_src"));
                    }
                }
            }
            $(window).on('scroll', Lazy);
            $(window).on('load', Lazy);
</script>

原文作者：匆匆那年_海，博客主页：https://www.jianshu.com/u/910c0667c515
95后前端汉子，爱编程、优秀、聪明、理性、沉稳、智慧的程序猿一枚。