IntersectionObserver API 实例demo

js IntersectionObserver API 手把手教学

<img        class="foo"        src=""        data-src="/img/banner2.png"        alt=""      />      <img        class="foo"        data-src="/img/banner2x.png"        alt=""        src=""      />
<div class="page-footer">        换行      </div>      <div class="page-footer">        换行      </div>      <div class="page-footer">        换行      </div>      <div class="page-footer">        换行      </div>      <div class="page-footer">        换行      </div>      <div class="page-footer">        换行      </div>      <div class="page-footer">        换行      </div>      <div class="page-footer">        换行      </div>      <div class="page-footer">        换行      </div>      <div class="page-footer">        换行      </div>      <div class="page-footer">        换行      </div>      <div class="page-footer">        换行      </div>      <div class="page-footer">        换行      </div>      <img        class="foo"        src=""        data-src="/img/banner2.png"        alt=""      />      <img        class="foo"        data-src="/img/banner2x.png"        alt=""        src=""      /><img        class="foo"        src=""        data-src="/img/banner2.png"        alt=""      />      <img        class="foo"        data-src="/img/banner2x.png"        alt=""        src=""      />


<style>
.foo {  width: 100%; height: 120px;}
</style>

//js

 const lazyImages = document.querySelectorAll('.foo');    const observer = new IntersectionObserver((entries, observer) => {        entries.forEach(entry => {          console.log(entry);                      if (entry.isIntersecting || entry.intersectionRatio > 0) {              console.log('yes isIntersecting');                const img = entry.target;                img.src = img.dataset.src;                observer.unobserve(img);            }        });    });    console.log('lazyImages ', lazyImages)    lazyImages.forEach(img => observer.observe(img));

该API主要有一个回调函数，一个options配置项

let options = {
  root: null, // 默认为视窗
  rootMargin: '0px', // 视窗的外边距
  threshold: 0.1 // 目标元素可见比例达到 10% 时触发回调
};

let observer = new IntersectionObserver(callback, options);

监听对象主要是以下几种只读属性：

其中intersectionRatio代表: 目标进入视窗的百分比；

isIntersecting代表：目标是否可见，其中这与options设置的threshold有关，设置为0就代表一进入视窗就为true；

MDN这样解释的

IntersectionObserver.thresholds 只读

一个包含阈值的列表，按升序排列，列表中的每个阈值都是监听对象的交叉区域与边界区域的比率。当监听对象的任何阈值被越过时，都会生成一个通知（Notification）。如果构造器未传入值，则默认值为 0