Различные обратные вызовы для разных целей с помощью Intersection Observer API

Question

Я использую API Intersection Observer на сайте.Для каждого случая использования я использую один и тот же конфиг (основной видовой экран).Моя проблема в том, что мне нужно, чтобы при срабатывании обратного вызова происходили разные вещи.Для некоторых я хочу лениво загрузить изображение.Для некоторых я хочу инициализировать карусель и т. Д.

Есть ли способ использовать один и тот же наблюдатель для всех этих различных приложений, или мне нужно использовать разных наблюдателей для каждого уникального обратного вызова?

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>