Document
html,
body {
margin: 0;
padding: 0;
}
.scroll-con {
}
.scroll-con-img {
display: block;
opacity: 0;
margin-top: 50px;
transform: translateX(50%);
transition: all 1s;
}
.fade {
transform: translateX(0);
opacity: 1;
transition: all 1s;
}
</style>
</head>
<body>
<div class="scroll-con">
<img
data-src="https://images3.alphacoders.com/116/thumb-1920-1168146.jpg"
alt=""
class="scroll-con-img"
/>
<img
data-src="https://images3.alphacoders.com/116/thumb-1920-1168146.jpg"
alt=""
class="scroll-con-img"
/>
<img
data-src="https://images3.alphacoders.com/116/thumb-1920-1168146.jpg"
alt=""
class="scroll-con-img"
/>
<img
data-src="https://images3.alphacoders.com/116/thumb-1920-1168146.jpg"
alt=""
class="scroll-con-img"
/>
<img
data-src="https://images3.alphacoders.com/116/thumb-1920-1168146.jpg"
alt=""
class="scroll-con-img"
/>
<img
data-src="https://images3.alphacoders.com/116/thumb-1920-1168146.jpg"
alt=""
class="scroll-con-img"
/>
<img
data-src="https://images3.alphacoders.com/116/thumb-1920-1168146.jpg"
alt=""
class="scroll-con-img"
/>
<img
data-src="https://images3.alphacoders.com/116/thumb-1920-1168146.jpg"
alt=""
class="scroll-con-img"
/>
<img
data-src="https://images3.alphacoders.com/116/thumb-1920-1168146.jpg"
alt=""
class="scroll-con-img"
/>
<img
data-src="https://images3.alphacoders.com/116/thumb-1920-1168146.jpg"
alt=""
class="scroll-con-img"
/>
</div>
<script>
var imgs = document.querySelectorAll('.scroll-con-img')
var con = document.querySelector('.scroll-con')
/* var options = {
root: con,
threshold: 1,
rootMargin: '0px',
}
*/ function lazyload(target) {
const io = new IntersectionObserver((entries, observer) => {
entries.forEach((entry) => {
//当图片出现在视口时，entry中的isIntersecting值为true
if (entry.isIntersecting) {
const img = entry.target
const src = img.getAttribute('data-src')
img.setAttribute('src', src)
img.classList.add('fade')//添加一个图片显示的效果
observer.disconnect()//关闭对实例的观察
}
console.log(entry);
})
})
io.observe(target) // 开启观察
}
imgs.forEach(lazyload) //为每一个图片开启观察
</script>
</body>
