IntersectionObserver可以监测元素在当前可视窗口的比例，完成实现图片懒加载
getBoundingClientRect也是一个很好用查看元素偏移等的API
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
ul{
list-style: none;
}
img{
width: 200px;
height: 200px;
background: #ddd;
}
</style>
</head>
<body>
<ul>
<li><img data-src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2943125063,3292210397&fm=26&gp=0.jpg" ></li>
<li><img data-src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2024373923,2140139723&fm=26&gp=0.jpg" ></li>
<li><img data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603097108640&di=85ad12ff7eb7f9572016612de1135925&imgtype=0&src=http%3A%2F%2Fa-ssl.duitang.com%2Fuploads%2Fitem%2F201407%2F18%2F20140718063817_s3Gnz.gif" ></li>
<li><img data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603097122497&di=1dff2a1a87c795199973d6f351ab88c6&imgtype=0&src=http%3A%2F%2Fimg2.imgtn.bdimg.com%2Fit%2Fu%3D1120712552%2C1362700559%26fm%3D214%26gp%3D0.jpg" ></li>
<li><img data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603097135282&di=bbb17f186fa620e910ad079e5f998711&imgtype=0&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D2230676464%2C2378994766%26fm%3D214%26gp%3D0.jpg" ></li>
<li><img data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603097163421&di=8cd014f555709f796fe643adde44afc3&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2Fa044ad345982b2b7014e90fe33adcbef76099b33.jpg" ></li>
<li><img data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603097184425&di=4dbac84b3f735da758433becd9d4e9ee&imgtype=0&src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201407%2F13%2F20140713000933_dC2z3.thumb.700_0.gif" ></li>
<li><img data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603097216523&di=e3393b6449183d29f689e10783c9694b&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fw%253d580%2Fsign%3D2b04e747fd1f4134e0370576151e95c1%2F05460b2442a7d933458f9ed7ad4bd11372f00167.jpg" ></li>
<li><img data-src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=149701518,1608548313&fm=26&gp=0.jpg" ></li>
<li><img data-src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2692023635,939588326&fm=26&gp=0.jpg" ></li>
<li><img data-src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=268907504,1715864470&fm=26&gp=0.jpg" ></li>
<li><img data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603097268873&di=0ec97e5a4185af04869e5f150a1bf18d&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20171129%2Ff510b6d293264e0cba3072353e5eb067.gif" ></li>
<li><img data-src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=366871761,2360018043&fm=26&gp=0.jpg" ></li>
<li><img data-src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3251940718,1404860427&fm=26&gp=0.jpg" ></li>
<li><img data-src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2476878483,4014399276&fm=26&gp=0.jpg" ></li>
<li><img data-src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2055680573,3089421073&fm=26&gp=0.jpg" ></li>
<li><img data-src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3926221861,1230045557&fm=26&gp=0.jpg" ></li>
</ul>
<script>
var imglist = document.querySelectorAll('img')
var observer = new IntersectionObserver(entries=>{
entries.forEach(entry=>{
if(entry.intersectionRatio>0){
entry.target.src = entry.target.dataset.src
observer.unobserve(entry.target)
}
})
})
imglist.forEach(imgitem=>{
observer.observe(imgitem)
})
</script>
</body>
</html>
