声明：本文内容参考了博文：https://blog.csdn.net/w1418899532/article/details/90515969 以及https://zhuanlan.zhihu.com/p/55311726，详细了解可以移步这些博文，感谢原作者的文章，由于是初学，本文的代码也均是借鉴的这些博主，非常感谢你们，给予了我很大帮助！
个人理解
其实所谓的图片懒加载，就是可以简单理解成“需要时再加载”，便达成了一种“懒”的效果。也就是说，图片存在服务器上，为了不让并发数过多（即访问人数过多）造成服务器带宽的浪费，可以在将需要显示的图片拖动到可视区域的时候再进行加载，从而大大节省了服务器的带宽，达到一种性能的优化。
原理
我们都知道，图片是用<img>这个标签来设置的，其中，这个标签有个属性src，也就是source，写明了图片资源的地址。那么要实现懒加载，就先不给src属性赋值，等到需要显示的图片进入可视区域时再给img标签的src属性赋值即可，这便是懒加载的原理了。
实现步骤
1.加载loading图片（也就是一直转转转的小菊花，懂得都懂doge）
2.判断哪个图片需要加载
3.替换loading图
示意图
举个实际浏览器的页面的例子就可以很轻松的明白了：
好了，看了示意图和实际的例子，可以自己先推断一下，究竟怎么样才能实现：待加载部分一进入可视区域就进行加载呢？可以先思考下，这里给个提示：距离。
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
好的，这里揭晓答案，要用到一个公式来判断。 scrollTop + clientHeight > offsetTop
其实很好理解，结合原理图，当这个offsetTop比scrollTop和clientHeight加起来要小时，说明待加载部分已经进入了可视区域，这个时候就可以真正进行加载了。
接下来来实现。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
</script>
</head>
<body>
<div class="imgs">
<img src="img/loading.gif" alt="pictures" class="lazyimg" data-src="img/1.jpeg"><br>
<img src="img/loading.gif" alt="pictures" class="lazyimg" data-src="img/2.jpeg"><br>
<img src="img/loading.gif" alt="pictures" class="lazyimg" data-src="img/3.jpeg"><br>
<img src="img/loading.gif" alt="pictures" class="lazyimg" data-src="img/4.jpeg"><br>
<img src="img/loading.gif" alt="pictures" class="lazyimg" data-src="img/5.jpeg"><br>
<img src="img/loading.gif" alt="pictures" class="lazyimg" data-src="img/6.jpeg"><br>
<img src="img/loading.gif" alt="pictures" class="lazyimg" data-src="img/7.jpeg"><br>
<img src="img/loading.gif" alt="pictures" class="lazyimg" data-src="img/8.jpeg"><br>
<img src="img/loading.gif" alt="pictures" class="lazyimg" data-src="img/9.jpeg"><br>
</div>
</body>
</html>
js代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload = function() {
//获取图片列表
var imgs = document.getElementsByTagName("img");
//获取到浏览器顶部的距离
function getTop(event) {
return event.offsetTop;
}
//实现懒加载
function lazyLoad(imgs) {
//可视区域的高度
var height = window.innerHeight;
//滚动区域的高度
var scroll = document.documentElement.scrollTop || document.body.scrollTop;
for (var i = 0; i < imgs.length; i++){
//图片距离顶部的距离小于可视区域和滚动区域之和时进行懒加载
if((height+scroll)>getTop(imgs[i])){
//这里是（）（）；即立即执行函数，如果不是，i的值会直接变成9，即图片的张数
(function(i){
setTimeout(function(){
imgs[i].src = imgs[i].getAttribute('data-src');//3秒后直接改img标签的src即可
},3000)
})(i);
}
}
}
lazyLoad(imgs);//先执行一次，不然刚开始显示在可视区域的图片没法自动显示，除非滚动滚轮。有些人可能会问，为什么刚开始似乎不会满足if的条件呀，为什么还会加载图片呢？你可以仔细想想，刚开始也是满足这个判断的条件的
//滚屏函数
window.onscroll = function(){
lazyLoad(imgs);
}
};
</script>
</head>
<body>
<div class="imgs">
<img src="img/loading.gif" alt="pictures" class="lazyimg" data-src="img/1.jpeg"><br>
<img src="img/loading.gif" alt="pictures" class="lazyimg" data-src="img/2.jpeg"><br>
<img src="img/loading.gif" alt="pictures" class="lazyimg" data-src="img/3.jpeg"><br>
<img src="img/loading.gif" alt="pictures" class="lazyimg" data-src="img/4.jpeg"><br>
<img src="img/loading.gif" alt="pictures" class="lazyimg" data-src="img/5.jpeg"><br>
<img src="img/loading.gif" alt="pictures" class="lazyimg" data-src="img/6.jpeg"><br>
<img src="img/loading.gif" alt="pictures" class="lazyimg" data-src="img/7.jpeg"><br>
<img src="img/loading.gif" alt="pictures" class="lazyimg" data-src="img/8.jpeg"><br>
<img src="img/loading.gif" alt="pictures" class="lazyimg" data-src="img/9.jpeg"><br>
</div>
</body>
</html>
这里说一下，原博主实现了隐形加载，实际上我觉得不需要如此，只需在满足判断条件的情况下，设置一下setTimeout之后，把原来的img的src改成真的图片的src即可，这样做似乎也不会浪费什么资源。
实现效果如下：
2072
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
