原生js实现图片懒加载

<img data-src="https://pic.imgdb.cn/item/614ed1642ab3f51d91a0da60.jpg" >
<img data-src="https://pic.imgdb.cn/item/6184d50c2ab3f51d910e3c4f.jpg" >
<img data-src="https://pic.imgdb.cn/item/6184d41a2ab3f51d910cee6f.jpg" >
<img data-src="https://pic.imgdb.cn/item/6167be3f2ab3f51d91d719a5.png" >
<img data-src="https://pic.imgdb.cn/item/615eb6222ab3f51d91dea117.jpg" >

let num = document.getElementsByTagName('img').length
let img = document.getElementsByTagName('img')
let n = 0 // 存储图片加载到的位置， 避免每次从第一张开始遍历
let isLoading = false // 判断当前容器里的图片是否加载完成
let _clientHeight = document.documentElement.clientHeight // 可见区域的高度
let _scrollTop = document.documentElement.scrollTop || document.body.scrollTop //滚动条距离顶部的高度

// 监听窗口变化重新计算可视区域的高度
function computedClientHeight () {
	_clientHeight = document.documentElement.clientHeight
}

lazyLoad()
// 加载可视区域内的图片
function lazyLoad() {
	// 判断图片是否已经全部加载玩
	isLoading = n >= num
	// 获取一遍滚动条距离顶部的高度
	_scrollTop = document.documentElement.scrollTop || document.body.scrollTop //滚动条距离顶部的高度
	// 对每个图片进行判断，如果该图片的offsetTop小于_scrollTop则表示该图片需要被加载了
	// 对于已经加载了的图片则可以不用再for循环判断一遍
	for (var i = n; i < num; i++) {
		if (img[i].offsetTop < (_scrollTop + _clientHeight)) {
			img[i].setAttribute('src', img[i].getAttribute('data-src'))
			// 符合条件的最后一个图片加载完后将其i的值+1赋给n，下次则从第n个图片开始判断是否加载
			n = i + 1
		}
	}
}

/**
 * 节流函数，防止加载图片时进行多余的操作
 * 滚动条开始滚动时开始计时，一段时间后计算此时的滚动条距离顶部的高度
 */
function throttle (func, delay, flag) {
	let timerOut
	return function () {
		if (flag) return
		if (!timerOut) {
			timerOut = setTimeout(function () {
				timerOut = null
				func()
			}, delay)
		}
	}
}

/**
 * 防抖函数，防止不断触发窗口的变化
 * 窗口不断变化后，等待一定时间开始懒加载，窗口一直在变化中则不执行懒加载
 */
function debounce (callback, delay) {
	let timer
	return function (arg) {
		clearTimeout(timer)
		timer = setTimeout(function () {
			callback(arg)
		}, delay)
	}
}

window.addEventListener('scroll', throttle(lazyLoad, 100, isLoading))
window.addEventListener('resize', debounce(computedClientHeight, 800))