IntersectionObserver란 무엇입니까? IntersectionObserver 소개

이 기사에서는 IntersectionObserver가 무엇인지 소개합니다. IntersectionObserver의 소개에는 특정 참고 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

상위 요소 또는 창과 대상 요소의 교차 상태를 추적할 수 있습니다. 또한 요소의 일부만 뷰포트에 표시되는 경우에도 콜백 함수를 트리거하도록 선택할 수 있습니다. 단 하나의 픽셀이라도 마찬가지입니다.

IntersectionObserver 왜 필요한가요?

대상 요소가 뷰포트에 들어가는지 모니터링해야 할 때 스크롤 이벤트를 모니터링해야 합니다. 많은 양의 계산으로 인해 성능 문제가 발생합니다.

IntersectionObserver 이 문제를 해결하는 방법은 무엇입니까?

IntersectionObserver API는 비동기식이며 대상 요소의 스크롤과 동기적으로 트리거되지 않습니다. 즉, 관찰자는 스레드가 유휴 상태일 때만 실행됩니다. 이는 이 관찰자의 우선순위가 매우 낮으며 다른 작업이 완료되고 브라우저가 자유로울 때만 실행된다는 것을 의미합니다.

IntersectionObserverEntry 객체

new IntersectionObserver(callback, options)

    let observer = new IntersectionObserver((e) => {
        let isintersecting = e[0].isIntersecting
        console.log(e[0].intersectionRatio)
        if (isintersecting) {
            console.log('我出来了');
        }else{
            console.log('我隐藏了');
        }
    }, {
        root: null
    })
    
    // 观察某个目标元素，一个观察者实例可以观察任意多个目标元素。
    observer.observe(document.querySelector('.scroll-down'))

IntersectionObserverEntry 객체는 총 6가지 속성으로 대상 요소에 대한 정보를 제공합니다.

{
time: 가시성이 변경되는 시간(밀리초 단위의 고정밀 타임스탬프)
target: 관찰되는 대상 요소, DOM 노드 객체
rootBounds: 루트 요소의 직사각형 영역에 대한 정보, getBoundingClientRect() 메서드의 반환 값, 루트 요소가 없는 경우(즉, 뷰포트를 기준으로 직접 스크롤하는 경우) null을 반환합니다.
boundingClientRect: 대상 요소의 직사각형 영역에 대한 정보
intersectionRect: 해당 요소에 대한 정보 대상 요소와 뷰포트(또는 루트 요소) 사이의 교차 영역
intersectionRatio: 대상 요소의 가시 비율, 즉 IntersectionRect와boundingClientRect의 비율이 완전히 표시되면 1이고, 완전히 표시되면 1입니다. 보이지 않으며 0보다 작거나 같습니다.
}

옵션에는 주로

{
    root: null, // 指定与目标元素相交的根元素，默认null为视口
    threshold: [] // [0, 0.5, 1] 当目标元素和根元素相交的面积占目标元素面积的百分比到达或跨过某些指定的临界值时就会触发回调函数
    Magin：‘’ // "100px 0" 与margin类型写法，指定与跟元素相交时的延时加载
}

인스턴스 메서드

observe()

가 포함됩니다. 특정 Target 요소를 관찰하면 관찰자 인스턴스는 원하는 수의 대상 요소를 관찰할 수 있습니다. 여기 일부 학생들은 다음과 같이 질문할 수 있습니다. 위임할 수 있나요? 생성되지 않은 요소까지 포함하여 페이지의 모든 img 요소를 관찰하기 위해 관찰 메소드를 한 번만 호출할 수 있습니까? 대답은 '아니요'입니다. 이것은 이벤트가 아니며 버블링도 없습니다.

unobserve()

특정 대상 요소의 관찰을 취소합니다. 지연 로딩은 일반적으로 관찰의 콜백이 해당 요소에서 직접 unobserve()를 호출해야 합니다. 관찰된 모든 요소 대상 요소

takeRecords()

이 메서드를 이해하려면 기본 내용에 대해 이야기해야 합니다. 브라우저 내부에서 관찰자 인스턴스가 특정 순간에 여러 교차 작업을 관찰하면 콜백이 즉시 실행되지 않습니다. .requestIdleCallback()(현재 Chrome에서만 지원됨)은 우리가 지정한 콜백 함수를 비동기적으로 실행하며 최대 지연 시간은 100밀리초로 규정합니다. 이는 브라우저가 실행하는 것과 동일합니다:

requestIdleCallback(() => {
  if (entries.length > 0) {
    callback(entries, observer)
  }
}, {
  timeout: 100
})

위 내용은 IntersectionObserver란 무엇입니까? IntersectionObserver 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!