Intersection Observer 에서 그림 게 으 른 로 딩 을 실현 하 는 예제
2749 단어 그림.게으르다IntersectionObserver
https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
직접 원본 코드 올 리 기:
<!DOCTYPE html>
<html>
<header>
<style>
.list-item{
height: 400px;
margin: 5px;
background-color: lightblue;
list-style: none;
}
</style>
</header>
<body>
<li class="list-item"><img class="list-item-img" alt="loading" data-src='./images/icon1.png'></li>
<li class="list-item"><img class="list-item-img" alt="loading" data-src='./images/icon2.png'></li>
<li class="list-item"><img class="list-item-img" alt="loading" data-src='./images/icon3.png'></li>
<li class="list-item"><img class="list-item-img" alt="loading" data-src='./images/icon4.png'></li>
<li class="list-item"><img class="list-item-img" alt="loading" data-src='./images/icon5.png'></li>
<li class="list-item"><img class="list-item-img" alt="loading" data-src='./images/icon6.png'></li>
<script>
var observer = new IntersectionObserver(function(changes) {
console.log(changes);
changes.forEach(function(element, index) {
// statements
if (element.intersectionRatio > 0 && element.intersectionRatio <= 1) {
element.target.src = element.target.dataset.src;
}
});
});
function addObserver() {
var listItems = document.querySelectorAll('.list-item-img');
listItems.forEach(function(item) {
observer.observe(item);
});
}
addObserver();
</script>
</body>
</html>호 환 브 라 우 저:
desktop：
Mobile：
이상 의 Intersection Observer 가 게 으 른 로 딩 을 실현 하 는 예 는 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 께 참고 가 되 고 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
데이터 구조 - 그림 - C 언어 - 인접 행렬데이터 구조 - 그림 - C 언어 - 인접 행렬 공식 표기 법 응시 표기 법...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
