什么是图片懒加载

当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次），当图片出现在浏览器的可视区域内时，才设置图片真正的路径，让图片显示出来。这就是图片懒加载。

通俗一点：
1、就是创建一个自定义属性data-src存放真正需要显示的图片路径，而img自带的src放一张大小为1 * 1px的图片路径。
2、当页面滚动直至此图片出现在可视区域时，用js取到该图片的data-src的值赋给src。
ps：自定义属性可以取任何名字

<img src="xxx.jpg" data-src="photo.jpg">

//如何加载图片：替换src
function loadImg($img){
$img.attr('src', $img.attr('data-src')) //把data-src的值 赋值给src
$img.attr('data-isLoaded', 1) //已加载过的图片做标记
}

//如何判断图片出现在视野中
//元素相对顶点的距离(文字) <= 窗口高度 + 滚动的距离
function isShow($node){
return $node.offset().top <= $(window).height() + $(window).scrollTop()
}

https://www.cnblogs.com/moxiaowohuwei/p/7908877.html