AHABHGK

1// 获取所有的图片标签
2const imgs = document.getElementsByTagName('img')
3// 获取可视区域的高度
4const viewHeight = window.innerHeight || document.documentElement.clientHeight
5// num用于统计当前显示到了哪一张图片，避免每次都从第一张图片开始检查是否露出
6let num = 0
7function lazyload(){
8  for(let i=num; i<imgs.length; i++) {
9    // 用可视区域高度减去元素顶部距离可视区域顶部的高度
10    let distance = viewHeight - imgs[i].getBoundingClientRect().top
11    // 如果可视区域高度大于等于元素顶部距离可视区域顶部的高度，说明元素露出
12    if(distance >= 0 ){
13      // 给元素写入真实的src，展示图片
14      imgs[i].src = imgs[i].getAttribute('data-src')
15      // 前i张图片已经加载完毕，下次从第i+1张开始检查是否露出
16      num = i + 1
17    }
18  }
19}
20// 监听Scroll事件
21window.addEventListener('scroll', lazyload, false);