1、什么是懒加载
将图片src先赋值为一张默认图片，当用户滚动滚动条到可视区域图片的时候，再去加载后续真正的图片
2、为什么要引入懒加载
懒加载（LazyLoad）是前端优化的一种有效方式，可以减轻服务器的压力，而且可以让加载好的页面更快地呈现在用户面前（用户体验好）
3、加载实现的原理
先将img标签中的src链接设置为空，将真正的图片链接放在自定义属性（data-src），当js监听到图片元素进入到可视窗口的时候，将自定义属性中的地址存储到src中，达到懒加载的效果。
4、实现思路
如果滚动的大小和屏幕高度之和大于元素到顶部的距离，设置一个定时器，制造懒加载的延迟加载的效果，也就是说，当我们滑动滚动条，看见图片的时候，就让它加载出来
5、懒加载的实现（jquery）
<img src="/image/8.jpg" data-src="/image/1.png" alt="">
<img src="/image/8.jpg" data-src="/image/2.png" alt="">
<img src="/image/8.jpg" data-src="/image/3.png" alt="">
<img src="/image/8.jpg" data-src="/image/4.png" alt="">
<img src="/image/8.jpg" data-src="/image/5.png" alt="">
<img src="/image/8.jpg" data-src="/image/6.png" alt="">
<img src="/image/8.jpg" data-src="/image/7.png" alt="">
$(window).scroll(handleScroll)
function handleScroll() {
let imgs = $('img[data-src]');
console.log(imgs)
//获取滚动的值
let bodyScrollHeight = document.body.scrollTop || document.documentElement.scrollTop
console.log(bodyScrollHeight)
//获取可视高度(屏幕高度)
let windowHeight = window.innerHeight
console.log(windowHeight)
for (let i = 0; i < imgs.length; i++) {
// 获取元素到浏览器顶部的距离
let imgHeight = $(imgs[i]).offset().top
// console.log(imgHeight)
// 如果滚动的大小和屏幕高度之和大于元素到顶部的距离
if (imgHeight < windowHeight + bodyScrollHeight) {
//setTimeout:设置一个定时器，制造懒加载的延迟加载的效果
setTimeout(function () {
$(imgs).eq(i).attr('src', $(imgs).eq(i).attr('data-src'))
}, 1000)
}
}
}
handleScroll()
原生
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lazyload</title>
<style>
img {
display: block;
margin-bottom: 50px;
height: 200px;
}
</style>
</head>
<body>
<img src="images/loading.gif" data-src="images/1.png">
<img src="images/loading.gif" data-src="images/2.png">
<img src="images/loading.gif" data-src="images/3.png">
<img src="images/loading.gif" data-src="images/4.png">
<img src="images/loading.gif" data-src="images/5.png">
<img src="images/loading.gif" data-src="images/6.png">
<img src="images/loading.gif" data-src="images/7.png">
<img src="images/loading.gif" data-src="images/8.png">
<img src="images/loading.gif" data-src="images/9.png">
<img src="images/loading.gif" data-src="images/10.png">
<img src="images/loading.gif" data-src="images/11.png">
<img src="images/loading.gif" data-src="images/12.png">
<script>
function throttle(fn, delay, atleast) {
//函数绑定在 scroll 事件上，当页面滚动时，避免函数被高频触发，
var timeout = null,//进行去抖处理
startTime = new Date();
return function() {
var curTime = new Date();
clearTimeout(timeout);
if(curTime - startTime >= atleast) {
fn();
startTime = curTime;
}else {
timeout = setTimeout(fn, delay);
}
}
}
function lazyload() {
var images = document.getElementsByTagName('img');
var len = images.length;
var n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历
return function() {
var seeHeight = document.documentElement.clientHeight;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
for(var i = n; i < len; i++) {
if(images[i].offsetTop < seeHeight + scrollTop) {
if(images[i].getAttribute('src') === 'images/loading.gif') {
images[i].src = images[i].getAttribute('data-src');
}
n = n + 1;
}
}
}
}
var loadImages = lazyload();
loadImages(); //初始化首页的页面图片
window.addEventListener('scroll', throttle(loadImages, 500, 1000), false);
//函数节流（throttle）与函数去抖（debounce）处理,
//500ms 的延迟，和 1000ms 的间隔，当超过 1000ms 未触发该函数，则立即执行该函数，不然则延迟 500ms 执行该函数
</script>
</body>
</html>
参考链接：
https://www.cnblogs.com/qing-5/p/11343125.html
https://blog.csdn.net/lqlq54321/article/details/106606563/