IntersectionObserver 实战：图片懒加载、无限列表与有效曝光

const lazyImages = document.querySelectorAll('img[data-src]');

if ('IntersectionObserver' in window) {
  const imageObserver = new IntersectionObserver((entries, observer) => {
    for (const entry of entries) {
      if (!entry.isIntersecting) continue;

      const image = entry.target;
      const source = image.dataset.src;
      if (source) {
        image.src = source;
        image.removeAttribute('data-src');
        observer.unobserve(image);
      }
    }
  }, {
    root: null,
    rootMargin: '300px 0px',
    threshold: 0,
  });

  lazyImages.forEach((image) => imageObserver.observe(image));
} else {
  // 渐进增强：不支持观察器时，仍加载内容，不要让图片永久空白。
  lazyImages.forEach((image) => {
    if (image.dataset.src) image.src = image.dataset.src;
  });
}

<section class="list-scroll" data-scroll-container aria-label="文章列表">
<ul id="article-list" data-list></ul>
<div class="list-sentinel" data-list-sentinel aria-hidden="true"></div>
<button type="button" data-load-more aria-controls="article-list">加载更多</button>
<p data-load-status role="status" aria-live="polite"></p>
</section>

.list-scroll {
  max-block-size: 24rem;
  overflow-y: auto;
}

.list-sentinel {
  width: 1px;
  height: 1px;
}

const list = document.querySelector('[data-list]');
const sentinel = document.querySelector('[data-list-sentinel]');
const loadMoreButton = document.querySelector('[data-load-more]');
const status = document.querySelector('[data-load-status]');
let loading = false;
let hasNextPage = true;
let disposed = false;
let activeController = null;

if (!list || !sentinel || !loadMoreButton || !status) {
  throw new Error('列表分页所需的 DOM 节点不存在');
}

async function loadNextPage() {
  if (loading || !hasNextPage || disposed) return;
  loading = true;
  loadMoreButton.disabled = true;
  status.textContent = '正在加载…';
  const controller = new AbortController();
  activeController = controller;

  try {
    const page = await fetchNextPage({ signal: controller.signal });
    if (disposed) return;
    if (!page || !Array.isArray(page.items) || typeof page.hasNextPage !== 'boolean') {
      throw new TypeError('分页响应格式不正确');
    }

    appendItems(list, page.items);
    hasNextPage = page.hasNextPage;
    status.textContent = hasNextPage ? `已加载 ${page.items.length} 条。` : '已加载全部内容。';
    loadMoreButton.disabled = !hasNextPage;
    if (!hasNextPage) pageObserver?.unobserve(sentinel);
  } catch (error) {
    if (!disposed && error?.name !== 'AbortError') {
      status.textContent = '加载失败，请重试。';
      loadMoreButton.disabled = false;
    }
  } finally {
    if (activeController === controller) activeController = null;
    loading = false;
  }
}

function onIntersection(entries) {
  if (entries.some((entry) => entry.target === sentinel && entry.isIntersecting)) {
    void loadNextPage();
  }
}

const pageObserver = typeof IntersectionObserver === 'function'
  ? new IntersectionObserver(onIntersection, {
      root: document.querySelector('[data-scroll-container]'),
      rootMargin: '0px 0px 400px 0px',
      threshold: 0,
    })
  : null;

function onLoadMore() {
  void loadNextPage();
}

loadMoreButton.addEventListener('click', onLoadMore);
pageObserver?.observe(sentinel);

function dispose() {
  disposed = true;
  pageObserver?.disconnect();
  loadMoreButton.removeEventListener('click', onLoadMore);
  activeController?.abort();
}

const cards = [...document.querySelectorAll('[data-card-id]')];
const pending = new Map();
const reported = new WeakSet();
const currentlyQualified = new WeakSet();

function cancelTimer(card) {
  const timer = pending.get(card);
  if (timer !== undefined) clearTimeout(timer);
  pending.delete(card);
}

const exposureObserver = new IntersectionObserver((entries) => {
  for (const entry of entries) {
    const card = entry.target;
    const qualifies = entry.isIntersecting
      && entry.intersectionRatio >= 0.5
      && document.visibilityState === 'visible';

    if (!qualifies || reported.has(card)) {
      currentlyQualified.delete(card);
      cancelTimer(card);
      continue;
    }

    currentlyQualified.add(card);
    if (!pending.has(card)) {
      const timer = setTimeout(() => {
        pending.delete(card);
        if (!currentlyQualified.has(card) || document.visibilityState !== 'visible' || reported.has(card)) return;
        reported.add(card);
        reportExposure({ id: card.dataset.cardId });
      }, 1000);
      pending.set(card, timer);
    }
  }
}, { threshold: [0, 0.5] });

cards.forEach((card) => exposureObserver.observe(card));

function onVisibilityChange() {
  if (document.visibilityState === 'hidden') {
    for (const card of pending.keys()) {
      currentlyQualified.delete(card);
      cancelTimer(card);
    }
    return;
  }

  // 重新观察会触发新一轮异步初始检查，避免后台期间的停留计时被累计。
  for (const card of cards) {
    if (!reported.has(card)) {
      exposureObserver.unobserve(card);
      exposureObserver.observe(card);
    }
  }
}

document.addEventListener('visibilitychange', onVisibilityChange);

function dispose() {
  for (const card of pending.keys()) cancelTimer(card);
  exposureObserver.disconnect();
  document.removeEventListener('visibilitychange', onVisibilityChange);
}