当前位置：首页 > JavaScript

js实现加载更多内容

2026-03-01 06:30:23JavaScript

实现滚动加载更多内容

使用Intersection Observer API监听元素进入视口，触发加载更多数据。这种方法性能较好，避免频繁计算滚动位置。

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      loadMoreData();
    }
  });
});

observer.observe(document.querySelector('.load-more-trigger'));

async function loadMoreData() {
  const response = await fetch('/api/data?page=' + currentPage);
  const newData = await response.json();
  appendDataToDOM(newData);
  currentPage++;
}

实现点击加载更多按钮

创建按钮点击事件处理程序，每次点击时获取新数据并追加到页面。

document.getElementById('load-more-btn').addEventListener('click', async () => {
  const response = await fetch('/api/data?page=' + currentPage);
  const newData = await response.json();

  newData.forEach(item => {
    const element = document.createElement('div');
    element.textContent = item.content;
    document.getElementById('content-container').appendChild(element);
  });

  currentPage++;

  if (currentPage >= totalPages) {
    document.getElementById('load-more-btn').disabled = true;
  }
});

实现无限滚动加载

监听窗口滚动事件，当接近底部时加载更多内容。需要添加防抖优化性能。

let isLoading = false;

window.addEventListener('scroll', debounce(() => {
  const { scrollTop, scrollHeight, clientHeight } = document.documentElement;

  if (scrollTop + clientHeight >= scrollHeight - 100 && !isLoading) {
    isLoading = true;
    loadMoreData().finally(() => isLoading = false);
  }
}, 200));

function debounce(fn, delay) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, arguments), delay);
  };
}

实现分页加载

维护当前页码状态，每次请求时递增页码参数。

let currentPage = 1;
const pageSize = 10;

async function loadPaginatedData() {
  const response = await fetch(`/api/data?page=${currentPage}&size=${pageSize}`);
  const data = await response.json();

  if (data.length > 0) {
    renderData(data);
    currentPage++;
  } else {
    showNoMoreData();
  }
}

实现虚拟滚动优化

对于大量数据，使用虚拟滚动技术只渲染可见区域内容。

const container = document.getElementById('virtual-scroll');
const contentHeight = 100000; // 总内容高度
const visibleItems = 10;
const itemHeight = 50;

container.style.height = `${visibleItems * itemHeight}px`;
container.addEventListener('scroll', () => {
  const scrollTop = container.scrollTop;
  const startIndex = Math.floor(scrollTop / itemHeight);

  renderItems(startIndex, startIndex + visibleItems);
});

function renderItems(start, end) {
  // 只渲染start到end范围内的项目
}