?? ??? 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>? 1 ?</h2>
<p></p>

<h2>? 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 ??? ????? ?? ?? ??? ?????!