如何使用 Intersection Observer 为不同的目标调用不同的函数？

Question

我在网站上使用 Intersection Observer API。对于使用它的每个实例，我都使用相同的配置（主视口）。我的问题是我需要在触发回调时发生不同的事情。对于某些人，我想延迟加载图像。对于一些，我想初始化轮播等

有没有办法对所有这些不同的应用程序使用同一个观察器，或者我是否必须对每个唯一的回调使用不同的观察器？

Answer 1

您可以为所有不同的目标重复使用相同的交集观察器和相同的回调，因为回调是为目标元素提供的，您可以使用该信息来自定义回调的作用。

在下面的示例中，我根据视图中的不同颜色 div 重用相同的 IntersectionObserver 实例和相同的回调函数来更改屏幕上的消息：

const message = document.getElementById('message');

function callbackRouter(entries, observer) {
  let entry = entries[0];
  let target = entry.target;
  if (entry.intersectionRatio > 0) {
    message.textContent = target.classList + " is in view!";
    if (target.dataset.callback) {
      window[target.dataset.callback](target);
    }
  }
}

function lazyLoadImage(target) {
    console.log('lazy load an image here');
}

function initCarousel(target) {
  console.log('initialize a carousel here');
}

function sendAsyncRequest(target) {
  console.log('send an async request here');
}

function doWhatever(target) {
  console.log('literally do whatever you want');
}

const observer = new IntersectionObserver(callbackRouter);
const boxes = document.querySelectorAll('.box');
boxes.forEach(observer.observe.bind(observer));

.box {
  height: 1000px;
}

.violet {
  background-color: violet;
}

.green {
  background-color: green;
}

.tomato {
  background-color: tomato;
}

.orange {
  background-color: orange;
}

#message {
  position: fixed;
  top: 20px;
  left: 20px;
  background-color: white;
  height: auto;
  padding: 10px 20px;
}

<div class="tomato box" data-callback="lazyLoadImage"></div>
<div class="violet box" data-callback="initCarousel"></div>
<div class="orange box" data-callback="sendAsyncRequest"></div>
<div class="green box" data-callback="doWhatever"></div>
<div id="message"></div>

如何使用 Intersection Observer 为不同的目标调用不同的函数？

How to call different functions for different targets using an Intersection Observer?

html

javascript

dom

intersection-observer