Intersection Observer API 是用于异步监测目标元素与祖先元素或视窗(viewport)之间交集的变化的 API。它提供了一种有效且性能较高的方法，用于在滚动和动态尺寸调整等情况下检测元素是否可见或者在可见区域内的程度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Intersection Observer Demo</title>
<style>
.image {
width: 100%;
height: 300px; /* 为了演示效果，设置一个固定的高度 */
background: #ccc; /* 为了演示效果，设置一个灰色背景 */
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="image" data-src="image1.jpg"></div>
<div class="image" data-src="image2.jpg"></div>
<div class="image" data-src="image3.jpg"></div>
<div class="image" data-src="image4.jpg"></div>
<div class="image" data-src="image5.jpg"></div>
</div>
<script>
// 目标元素的观察者回调函数
const observerCallback = (entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const image = entry.target;
const imageUrl = image.getAttribute('data-src');
if (imageUrl) {
image.style.backgroundImage = `url(${imageUrl})`;
image.removeAttribute('data-src');
observer.unobserve(image);
}
}
});
};
// 创建一个观察者实例并启动观察
const observer = new IntersectionObserver(observerCallback, {
root: null, // viewport 作为根
threshold: 0.5 // 50% 可见度时触发回调
});
document.querySelectorAll('.image').forEach(image => {
observer.observe(image);
});
</script>
</body>
</html>
HTML 结构：在容器 .container 内部有多个具有 .image 类的 div 元素，每个元素都有 data-src 属性用于存储图片的 URL。
CSS 样式：设置了一个 .image 类，包含了固定的高度和灰色背景，以便在加载图片前显示。
JavaScript：
observerCallback 函数，用于处理观察到的每个元素的交集变化。IntersectionObserver 实例 observer，并通过 observe 方法观察每个 .image 元素。.image 元素进入视窗（可见度超过 50%）时，通过 data-src 属性加载图片，并停止观察该元素。这是一个简单的示例，展示了如何使用 Intersection Observer API 来实现图片懒加载。你可以根据实际需求进一步扩展和优化。