<html>
<head>
<title>lazyLoad</title>
</head>
<style>
div{
height:120px;
width:100px;
overflow-y: auto;
}
img{
width:80px;
height:70px;
}
</style>
<body>
<div>
<img data-zjy=‘https://dgss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=3810555211,2918796770&fm=173&app=49&f=JPEG?w=312&h=208&s=C9231F7244A1D7173F4C11CD0300E0E0‘>
<img data-zjy=‘https://dgss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2871332316,5387476&fm=173&app=49&f=JPG?w=312&h=208&s=88F070845221BF555A554D9703003080‘>
<img data-zjy=‘https://dgss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1208071780,1778912703&fm=173&app=49&f=JPEG?w=312&h=208&s=7A90428F4C010D476C28B9380300C008‘>
<img data-zjy=‘https://dgss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2663639687,3262356824&fm=173&app=49&f=JPEG?w=312&h=208&s=191A6BD94E533ECA42B90558030040D3‘>
</div>
<script>
let observer = new IntersectionObserver((entries,observer)=>{
entries.forEach((entry)=>{
entry.target.src = entry.target.dataset.zjy;
observer.unobserve(entry.target)
})
},{
rootMargin:‘0px 0px -10px 0px‘
})
document.querySelectorAll(‘img‘).forEach(img=>{
observer.observe(img)
})
</script>
</body>
</html>
利用IntersectionObserver（交叉观察者）还可以实现滚动合适位置自动播放视频（加上链接wifi或是移动网络判断是否自动播放，知乎、虎扑、微博等列表展示的类似实现）
原文：https://www.cnblogs.com/zhenjianyu/p/13599528.html