JS中的IntersectionObserver用于监控元素显示和隐藏,并支持图片的懒加载技术
发布时间
阅读量:
阅读量
IntersectionObserver用于检测元素在视口中的显示状态,能够监测元素在可视区域中呈现的比例,其中1表示元素完全可见,0表示元素完全不可见。需要注意的是,通过opacity和visibility属性控制的元素可见性变化不会触发该观察器。此API在实现图片懒加载功能时具有广泛应用。
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width:100px;
height:100px;
margin: 10px;
background: #ccc;
}
</style>
</head>
<body>
<div class="box box1" s
全部评论 (0)
还没有任何评论哟~
