- 브라우저 뷰 포트와 설정한 요소의 교차점을 관찰하며, 요소가 뷰 포트에 포함되는지 포함되지 않는지 확인
- 사용자 화면에 지금 보이는 요소인지 아닌지를 구별하는 기능 제공
실습 1
<!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>
.item {
text-align: center;
padding: 20px 0px;
margin: 0px;
}
.item:nth-child(even) {
background-color: lightcoral;
}
</style>
</head>
<body>
<p class="start">start</p>
<div class="list"></div>
<p class="end">end</p>
<script defer src="index.js"></script>
</body>
</html>start와 end 관찰
const count = 20;
let itemIndex = 0;
//관찰하는 타겟이 설정한 option에 일치할시 callback함수 실
const observer = new IntersectionObserver(
(entries) => {
console.log(entries);
entries.forEach((entry) => {
const list = document.querySelector(".list");
if (entry.isIntersecting) {
if (entry.target.className === "start") {
console.log("start");
} else {
for (let i = itemIndex; i < itemIndex + count; i++) {
let item = document.createElement("p");
item.textContent = i;
item.className += "item";
list.appendChild(item);
}
itemIndex += count;
}
}
});
},
{ root: null, threshold: 1 }//root: 설정 안할 시 기본 뷰포트 인식
//threshold: 타겟이 어느정보 보여졌을 때 callback함수 실행 시킬지 설
);
const observeElement = document.querySelectorAll(".end, .start");
//타겟 관찰
observeElement.forEach((element) => {
observer.observe(element);
});실습 2
<!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>
img {
width: 400px;
height: 300px;
display: block;
margin: 10px auto;
}
</style>
</head>
<body>
<img src="https://via.placeholder.com/400x300" data-src="../123.jpg" />
<img src="https://via.placeholder.com/400x300" data-src="../123.jpg" />
<img src="https://via.placeholder.com/400x300" data-src="../123.jpg" />
<img src="https://via.placeholder.com/400x300" data-src="../123.jpg" />
<script defer src="index.js"></script>
</body>
</html>const observer = new IntersectionObserver(
function (entrise, observer) {
console.log(entrise);
entrise.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.src = entry.target.dataset.src;
observer.unobserve(entry.target);
}
});
},
{
threshold: 1,
}
);
const imgs = document.querySelectorAll("img");
imgs.forEach((element) => {
observer.observe(element);
});
