1.什么是懒加载

只加载当前窗口范围中的图片
在用户滚动页面的时候自动获取更多的数据

2.懒加载的特点

通过滚动获取到的新的数据不会影响原有数据的显示
加快了网页响应的速度
最大程度上减少了服务器端的资源耗用

3.懒加载步骤

拿到图片数据后，不要将图片的地址拼接到图片的src属性中，为其设置其他的属性如data-original，来暂存图片地址
获取屏幕的高度

var screenHeight = $(window).outerHeight();

在图片加载后，获取到所有图片的上边框到document上边框的距离

this.onload = function () {
    var $this = $(this);
    // 图片距离顶部的值
    var imgScrollTop = $this.offset().top;

    // 判断是否在屏幕范围内容
    if (imgScrollTop < screenHeight) {
        // 从data-original中取出值，并放到src属性中
        $this.attr({
            src: $this.attr('data-original')
        });
    }
 }

判断在滚屏中，图片是否进入用户的视野

window.onscroll=function (){
    var srcollValue= screenHeight + $(window).scrollTop();
    $('section img').each(function (i, v) {
         var $this = $(this);
         // 图片距离顶部的值
         var imgScrollTop = $this.offset().top;
         if (imgScrollTop <= scrollValue) {
             $this.attr({
                 src: $this.attr('data-original')
             })
         }
     })
}