思路：将真实图片地址先放在 data-src 属性上，当图片出现在可视区域当时候，再将 data-src 属性值设置到 src 属性上，触发下载图片。
判断是否在可视区域，可以用元素的 getBoundingClientRect 方法（参考）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片懒加载</title>
</head>
<style>
img {
width: 300px;
height: 300px;
background-color: #bebebe;
}
</style>
<body>
<img data-src="http://static.runoob.com/images/demo/demo2.jpg" src="" alt="">
<img data-src="http://static.runoob.com/images/demo/demo2.jpg" src="" alt="">
<img data-src="http://static.runoob.com/images/demo/demo2.jpg" src="" alt="">
<img data-src="http://static.runoob.com/images/demo/demo2.jpg" src="" alt="">
<img data-src="http://static.runoob.com/images/demo/demo2.jpg" src="" alt="">
<img data-src="http://static.runoob.com/images/demo/demo2.jpg" src="" alt="">
<img data-src="http://static.runoob.com/images/demo/demo2.jpg" src="" alt="">
<img data-src="http://static.runoob.com/images/demo/demo2.jpg" src="" alt="">
<img data-src="http://static.runoob.com/images/demo/demo2.jpg" src="" alt="">
<img data-src="http://static.runoob.com/images/demo/demo2.jpg" src="" alt="">
<img data-src="http://static.runoob.com/images/demo/demo2.jpg" src="" alt="">
<img data-src="http://static.runoob.com/images/demo/demo2.jpg" src="" alt="">
<img data-src="http://static.runoob.com/images/demo/demo2.jpg" src="" alt="">
<img data-src="http://static.runoob.com/images/demo/demo2.jpg" src="" alt="">
<img data-src="http://static.runoob.com/images/demo/demo2.jpg" src="" alt="">
<img data-src="http://static.runoob.com/images/demo/demo2.jpg" src="" alt="">
<img data-src="http://static.runoob.com/images/demo/demo2.jpg" src="" alt="">
<img data-src="http://static.runoob.com/images/demo/demo2.jpg" src="" alt="">
<img data-src="http://static.runoob.com/images/demo/demo2.jpg" src="" alt="">
<img data-src="http://static.runoob.com/images/demo/demo2.jpg" src="" alt="">
<img data-src="http://static.runoob.com/images/demo/demo2.jpg" src="" alt="">
<img data-src="http://static.runoob.com/images/demo/demo2.jpg" src="" alt="">
<img data-src="http://static.runoob.com/images/demo/demo2.jpg" src="" alt="">
<img data-src="http://static.runoob.com/images/demo/demo2.jpg" src="" alt="">
<img data-src="http://static.runoob.com/images/demo/demo2.jpg" src="" alt="">
<img data-src="http://static.runoob.com/images/demo/demo2.jpg" src="" alt="">
<img data-src="http://static.runoob.com/images/demo/demo2.jpg" src="" alt="">
<img data-src="http://static.runoob.com/images/demo/demo2.jpg" src="" alt="">
<img data-src="http://static.runoob.com/images/demo/demo2.jpg" src="" alt="">
</body>
<script>
const images = document.getElementsByTagName('img')
// 视窗宽高
const viewWidth = window.innerWidth || document.documentElement.clientWidth;
const viewHeight = window.innerHeight || document.documentElement.clientHeight;
// 节流方法
function throttle(func, delay) {
let timer = null;
return function() {
// 获取函数的作用域和变量
let that = this;
let args = arguments;
// 如果已经存在定时器了，忽略需要执行的方法，如果没有定时器，则创建一个新定时器
if (!timer) {
timer = setTimeout(function() {
func.apply(that, args);
timer = null;
}, delay);
}
}
}
// 监听滚动事件
document.addEventListener('scroll', throttle(function() {
for (const image of images) {
const { top, right, bottom, left } = image.getBoundingClientRect();
if(top >= 0 && left >= 0 && bottom <= viewHeight && right <= viewWidth) {
if(!image.getAttribute('src')) {
image.setAttribute('src', image.getAttribute('data-src'))
}
}
}
}, 300))
</script>
</html>