lazyLoad——减少页面请求时间，节省流量。

为什么要使用懒加载而不直接加载？
当然没规定一定要懒加载，肯定是根据实际情况来决定使用的与否。
当你一个页面有庞大的数据需要请求加载（比如花瓣、Pixiv等网站），你如果一次请求，先不说你要多久才能请求完整个页面，你有那么多流量吗？什么，你还不是无限流量，那你可以把自己卖给移动、电信、联通了。

使用懒加载加载图片有什么好处呢？
1 增强用户体验
2 优化代码
3减少http的请求
4减少服务器端压力
5服务器的按需加载

看到一个api很厉害，我们判断懒加载的执行一般是滚动条是否到底，或者浏览器的可视区，

IntersectionObserver

监视某个页面元素是否进入了可见窗口

这个api很厉害：（可见该博主的博客）
https://www.cnblogs.com/xupeiyu/p/5985652.html

当然，今天我只是简单的用jquery封装一个懒加载插件，不足之处请多多指教

function lazyLoad() {
    //当前窗口的高度
    var windowHeight = $(window).height();
    // 文档(document)的高
    var bodyHeight = $(document).height();
    //没有滚动条的情况下（图片不满屏），直接加载
    if(bodyHeight <= windowHeight){
        $('.lazyImg').each(function () {
            var that = $(this);
            //
            if(that.attr('data-src')!=that.attr("src")){
                //所需地址存在，则src变更为所需地址
                if(that.attr('data-src')){
                    that.attr('src',that.attr('data-src'))
                }
                //不存在以下操作可自定义
                else{
                    that.attr('data-src',that.attr('src'))
                }
            }
        });
    }else{
        var phase = 100;
        $(document).on("scroll",function (e) {
            $(".lazyImg").each(function () {
                var that = $(this);
                //窗口的高度+看不见的顶部的高度=屏幕低部距离最顶部的高度
                var realTop = parseInt($(window).height())+parseInt($(window).scrollTop());
                //屏幕顶部距离最顶部的高度   减去图片高度，上拉时也会点到图片就加载
                var thatTop = parseInt($(window).scrollTop()) - parseInt(that.height());
                var imgTop = parseInt(that.offset().top);
                if(imgTop>=thatTop - phase && imgTop<=realTop +phase && that.attr('data-src')!=that.attr('src')){
                    //所需地址存在，则src变更为所需地址
                    if(that.attr('data-src')){
                        that.attr('src',that.attr('data-src'))
                    }
                    //不存在以下操作可自定义
                    else{
                        that.attr('data-src',that.attr('src'))
                    }
                }
            })
        })
    }
}
lazyLoad();
$("body,html").scrollTop(1);
//进页面，吧顶部的图刷出

放一个demo下载:

https://github.com/LyuSen/lazyload

也可以直接拷贝：

效果查看