교차로 관찰자가 요소가 시야에있을 때를 알 수있는 몇 가지 기능적 사용

교차 관찰자 API : 요소가 보이는지 여부에 대한 실시간 모니터링

JavaScript가 최근 몇 년 동안 많은 관찰자들을 조용히 축적했다는 것을 알지 못할 수도 있으며, 교차로 관찰자는 강력한 도구 중 하나입니다. 관찰자는 새들이 좋아하는 곳에 앉아 새가 나타날 때까지 기다리는 것처럼 특정 이벤트를 실시간으로 모니터링하는 물건입니다. 다른 관찰자들은 다른 목표를 관찰합니다.

내가 접촉 한 첫 번째 관찰자는 돌연변이 관찰자였으며, 이는 DOM 트리의 변화를 감지합니다. 당시에는 독특했지만 이제는 더 많은 관찰자가 있습니다.

교차로 관찰자는 요소와 조상 요소 사이의 "교차"또는 페이지의 가시 영역 (즉, 뷰포트)을 관찰합니다 (즉, 요소가 뷰포트에 들어가거나 떠납니다). 스테이션 옆에서 기차 패스를 보는 것과 비슷합니다. 기차가 역에 들어가는시기, 역을 떠날 때와 얼마나 오래 멈췄는지 알 수 있습니다.

요소가 시야에 들어갈 때, 사라질 때, 또는 시야에 들어간 이후 얼마나 오래 지나간 지 이해하는 것은 매우 실용적입니다. 따라서, 우리는 교차로 관찰자 API를 통해 교차점을 생성하기위한 코드 후 일부 사용 사례에 대해 배웁니다.

IntersectionObserver 빠른 개요

글을 쓰는 시점에서 교차로 관찰자 API는 광범위한 지원을 받았습니다.

브라우저는 Caniuse의 데이터를 지원하며 자세한 내용이 포함되어 있습니다. 이 숫자는 브라우저 가이 버전 에서이 기능을 지원하고 나중에이 기능을 지원한다는 것을 나타냅니다.

데스크탑

모바일/태블릿

그러나 교차로 관찰자를 사용할 때 지원되는지 확인하려면 Window 개체에 IntersectionObserver 속성이 있는지 확인할 수 있습니다.

 if (!! window.intersectionObserver) {}
/* 또는 */
if (창에 'IntersectionObserver') {}

자, 대상의 창조를 살펴 보겠습니다.

 var observer = new intersectionObserver (콜백, 옵션);

intersectionObserver 객체의 생성자는 두 개의 매개 변수를 허용합니다. 첫 번째는 콜백 함수이며, 관찰자가 교차로를 알아 차리고 교차로에 대한 일부 데이터를 전달할 때 실행됩니다.

두 번째 (선택 사항) 매개 변수는 옵션 이며, "Cross"가 무엇인지 정의하는 정보가 포함 된 객체입니다. 우리는 요소가 시야에 들어갈 때를 알고 싶지 않고 완전히 볼 수있는 경우에만 알고 싶지 않을 수도 있습니다. 이와 같은 것은 옵션 매개 변수로 정의됩니다.

옵션에는 세 가지 속성이 있습니다.

• 루트 - 관찰 된 요소가 교차 할 조상 요소/뷰포트. 기차가 교차하는 역으로 생각하십시오.
• ROOTMARGIN - 루트 요소의 주변으로, 뿌리 요소의 관찰 영역을 축소 또는 확대하여 크로스 오버를 감지합니다. CSS 마진 속성과 유사합니다.
• 임계 값 - 값의 배열 (0과 1.0 사이)은 각각 콜백이 트리거되는 요소가 가로지는 거리를 가로 지르거나 교차하는 거리를 나타냅니다.

우리의 임계 ​​값이 0.5라고 가정하십시오. 콜백은 요소가 반시 가능한 임계 값으로 들어가거나 초과 할 때 트리거됩니다. 값이 [0.3, 0.6] 인 경우 요소가 30% 가시적 임계 값에 들어가거나 초과 할 때 콜백이 트리거되고 60% 가시 임계 값을 초과합니다.

그것은 지금 이론에 관한 것입니다. 데모를 보자. 우선, 게으른 하중.

유스 케이스 1 : 게으른 로딩 이미지

로드 태그를 보려면 내장 된 데모에 태그가 표시되지 않으므로이 페이지를 확인하십시오.

CSS- 트릭은 이미 게으른로드를 철저히 도입했습니다. 일반적으로 다음과 같이 수행됩니다. 가벼운 자리 표시자를 표시하면 이미지가 자리 표시 자의 위치에 표시 된 다음 시야 필드에 들어가거나 입력하려는 예상 이미지로 대체합니다. 나를 믿으십시오. 이것을 구현하는 것은 게으른 것이 아닙니다. 즉, 우리가 기본 코드를 사용할 때까지.

우리는 동일한 메커니즘을 적용 할 것입니다. 먼저, 우리는 많은 이미지를 가지고 있으며 처음 표시되는 자리 표시 자 이미지를 정의합니다. 우리는 데이터 속성을 사용하여 표시 할 원본 이미지의 URL을 전송합니다.이 이미지는 실제 이미지가 시야에 들어갈 때로드 될 이미지를 정의합니다.

<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174520555311750.jpg" class="lazy" alt="교차로 관찰자가 요소가 시야에있을 때를 알 수있는 몇 가지 기능적 사용"><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174520555481250.jpg" class="lazy" alt="교차로 관찰자가 요소가 시야에있을 때를 알 수있는 몇 가지 기능적 사용"><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174520555431263.jpg" class="lazy" alt="교차로 관찰자가 요소가 시야에있을 때를 알 수있는 몇 가지 기능적 사용">

나머지는 스크립트입니다.

 Observer = New IntersectionObserver (
(항목, 관찰자) => { 
  entries.foreach (entry => {
    /* 여기에서 각 십자가를 다루십시오*/
  });
}, 
{rootmargin : "0px 0px -200px 0px"});

위의 콜백 함수는 화살표 함수입니다 (정상 함수를 사용할 수 있지만).

콜백 함수는 두 개의 매개 변수를 수신합니다. 각 교차에 대한 정보가 포함 된 항목 세트; 그리고 관찰자 그 자체. 이 항목은 필터링되거나 반복 될 수 있으며 원하는 크로스 항목을 처리 할 수 ​​있습니다. 옵션에 관해서는 루트 마진 값 만 제공하여 루트 및 임계 값 속성이 기본값을 가져갈 수 있도록합니다.

루트의 기본값은 뷰포트이고 임계 값의 기본값은 0입니다. 이것은 대략 "요소가 뷰포트에 나타나는 순간에 알리는"것으로 대략 해석 될 수 있습니다!

그러나 이상하게도 Rootmargin을 사용하여 뷰포트 관측 영역의 바닥을 200 픽셀로 줄였습니다. 우리는 일반적으로 게으른 적재로 이것을하지 않습니다. 대신, 우리는 마진을 늘리거나 기본값을 유지할 수 있습니다. 그러나이 경우 일반적으로 마진을 줄이지 않습니다. 관찰 영역의 임계 값에로드 된 원본 이미지를 보여주기를 원하기 때문에이 작업을 수행합니다. 그렇지 않으면 모든 작업이보기에서 발생합니다.

이미지가 뷰포트의 시청 영역 (데모의 하단 위의 200 픽셀)과 교차하면 자리 표시 자 이미지를 실제 이미지로 바꿉니다.

 Observer = New IntersectionObserver (
(항목, 관찰자) => { 
entries.foreach (entry => {
    /* 자리 표시 자 교체*/
    Entry.Target.src = Entryget.target.dataset.src;
    Observer.unobserve (Entry.target);
  });
}, 
{rootmargin : "0px 0px -200px 0px"});

entry.target 관찰자가 관찰 한 요소입니다. 우리의 경우, 이것들은 이미지 요소입니다. 자리 표시자가 이미지 요소로 교체되면 더 이상 관찰 할 필요가 없으므로 관찰자의 unobserve 방법을 호출합니다.

관찰자가 준비되었으므로 이제 observe 방법을 사용하여 모든 이미지를 관찰해야합니다.

 document.querySelectorALL ( 'IMG'). foreach (img => {observer.observe (img)});

그게 다야! 우리는 이미지를로드하기 위해 게으르다. 다음 데모로 이동하십시오.

유스 케이스 2 : 요소가보기를 떠날 때 비디오를 자동으로 일시 중지합니다.

YouTube에서 비디오를보고 (어떤 이유로 든) 주석을 읽으려면 아래로 스크롤하려고합니다. 나는 당신이 어떤지 잘 모르지만, 나는 보통이 일을하기 전에 비디오를 일시 중지하지 않습니다. 즉, 브라우징을하는 동안 비디오를 놓친다는 것을 의미합니다.

비디오에서 스크롤 할 때 비디오가 자동으로 일시 중지되면 좋지 않습니까? 비디오가 시야를 다시 입력하면 재생이 재생되면 더 나을 것이므로 재생 또는 일시 정지 버튼을 클릭 할 필요가 없습니다.

교차로 관찰자는 확실히 이것을 할 수 있습니다.

HTML의 비디오는 다음과 같습니다.

<video controls="" src="OSRO-animation.mp4"></video>

각 크로스 오버 (예 : 항목) 동안 비디오를 일시 중지하고 재생하는 방법은 다음과 같습니다.

 video = document.querySelector ( 'Video');
ISPAUD = FALLE; /* 자동으로 일시 정지를위한 플래그*/
Let Observer = new intersectionObserver ((entries, observer) => { 
  entries.foreach (entry => {
    if (enlice.intersectionRatio! = 1 &&! video.paud) {
      video.pause (); ispaused = true;
    }
    else if (ispaused) {video.play (); ispaused = false}
  });
}, {임계 값 : 1});
Observer.observe (비디오);

각 크로스 (예 : 항목)에서 비디오를 일시 중지하고 재생하는 방법을 보여주기 전에 옵션의 임계 값 속성에주의를 기울이고 싶습니다.

임계 값의 값은 1입니다. 루트 및 rootmargin은 기본값을 취합니다. 이것은 "뷰포트에서 요소가 완전히 보이면 알려주세요."라고 말하는 것과 같습니다.

크로스가 발생하고 콜백이 트리거되면 다음 논리에 따라 비디오를 일시 중지하거나 재생합니다.

나는 비디오를 위해 unobserve 호출하지 않기 때문에 관찰자는 비디오가 계속 볼 때마다 비디오를 계속보고 일시 중지합니다.

유스 케이스 3 : 얼마나 많은 컨텐츠가 보았는지보기

이는 콘텐츠에 따라 다양한 방식으로 설명하고 구현할 수 있으며 컨텐츠를 얼마나 많이 볼 수 있는지 측정하는 선호하는 방법을 구현할 수 있습니다.

간단한 예를 들어, 페이지의 게시물 목록에서 각 게시물의 마지막 단락을 관찰합니다. 기사의 마지막 단락이 완전히 보이면, 우리는 기사를 읽었다고 가정합니다. 기차의 마지막 자동차를 보는 ​​것은 전체 열차를 보는 ​​것과 동일하다고 말할 수 있습니다.

이것은 페이지에 두 개의 기사를 표시하는 데모로 여러 개의 텍스트 단락이 포함되어 있습니다.

단순화 된 HTML은 다음과 같습니다.

<div></div>

<h2 id="제-조">제 1 조</h2>
<p></p>

<h2 id="제-조">제 2 조</h2>
<p></p>

n = 0을하자; /* 보는 총 기사 수*/
count = document.querySelector ( '#count');
Let Observer = new intersectionObserver ((entries, observer) => { 
  entries.foreach (entry => {
    if (EntrysInterSecting) {
      count.textContent =`기사가 완전히 보인다 - $ {n}`; 
      Observer.unobserve (Entry.target);
    }
  });
}, {임계 값 : 1});

document.querySelectorALL ( 'article> p : last-Child'). foreach (p => {observer.observe (p)});

각 크로스 오버 동안 (즉, 기사의 마지막 단락은 완전히 표시됩니다), 우리는 읽은 총 기사 수를 나타내는 카운터를 증가시킵니다. 그런 다음 해당 숫자를 기사 목록 위에 표시합니다.

마지막 단락의 크로스 오버를 계산 한 후에는 더 이상 관찰 할 필요가 없으므로 unobserve 라고 부릅니다.

참여해 주셔서 감사합니다!

이 기사의 예는 우리가 함께 볼 것입니다. 뷰포트와의 교차로를 기반으로 요소를 관찰하고 이벤트를 트리거하는 데 사용하는 방법을 배웠을 수도 있습니다.

즉, 관찰자를 통해 얻은 교차 데이터를 기반으로 시각적으로 변경할 때주의가 필요합니다. 물론, 교차로 관찰자는 크로스 데이터를 기록 할 때 매우 편리합니다. 그러나 화면에서 변경하는 데 사용될 때 변경 사항이 지연되지 않도록해야합니다. 이는 기본적 으로 검색된 데이터를 기반으로 변경하기 때문에 가능성이 있습니다. 로드하는 데 시간이 걸릴 수 있습니다.

우리가 볼 수 있듯이, 각 크로스 엔트리에는 크로스에 대한 정보를 전달하는 속성 세트가 있습니다. 이 게시물에서는 이러한 속성을 모두 다루지 않았으므로 확인하십시오.

이미지는 원래 형식으로 보존됩니다. 테이블은 입력에서 비어 있으므로 출력에서 ​​비어 있습니다. 또한 원래의 의미를 유지하면서 가독성과 흐름을 향상시키기 위해 문체를 변화 시켰습니다.

위 내용은 교차로 관찰자가 요소가 시야에있을 때를 알 수있는 몇 가지 기능적 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!