当前位置：首页 > JavaScript

js实现下拉加载

2026-04-04 18:44:42JavaScript

实现下拉加载的基本原理

下拉加载的核心是通过监听滚动事件，判断用户是否滚动到页面底部附近。当满足条件时触发数据加载。JavaScript结合DOM操作可以实现这一功能。

监听滚动事件

window.addEventListener('scroll', function() {
  // 滚动处理逻辑
});

判断滚动到底部

需要计算三个关键值：

js实现下拉加载

窗口可视高度 window.innerHeight
文档总高度 document.documentElement.scrollHeight
已滚动高度 window.scrollY

const scrollPosition = window.innerHeight + window.scrollY;
const pageHeight = document.documentElement.scrollHeight;
const threshold = 100; // 提前100px触发加载

if (scrollPosition > pageHeight - threshold) {
  // 执行加载
}

数据加载函数

let isLoading = false;
let currentPage = 1;

async function loadMoreItems() {
  if (isLoading) return;

  isLoading = true;
  try {
    const response = await fetch(`/api/items?page=${currentPage}`);
    const newItems = await response.json();

    // 将新数据添加到页面
    appendItems(newItems);
    currentPage++;
  } catch (error) {
    console.error('加载失败:', error);
  } finally {
    isLoading = false;
  }
}

完整实现示例

document.addEventListener('DOMContentLoaded', function() {
  const container = document.getElementById('items-container');
  let loading = false;
  let page = 1;

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

    if (scrollTop + clientHeight >= scrollHeight - 100 && !loading) {
      loadMore();
    }
  });

  async function loadMore() {
    loading = true;
    showLoader();

    try {
      const response = await fetch(`https://api.example.com/items?page=${page}`);
      const data = await response.json();

      if (data.length > 0) {
        data.forEach(item => {
          const itemElement = document.createElement('div');
          itemElement.className = 'item';
          itemElement.textContent = item.name;
          container.appendChild(itemElement);
        });
        page++;
      }
    } catch (error) {
      console.error('Error:', error);
    } finally {
      loading = false;
      hideLoader();
    }
  }

  function showLoader() {
    // 显示加载指示器
  }

  function hideLoader() {
    // 隐藏加载指示器
  }

  // 初始加载
  loadMore();
});

优化建议

添加防抖处理避免频繁触发

js实现下拉加载

let debounceTimer;
window.addEventListener('scroll', function() {
clearTimeout(debounceTimer);
debounceTimer = setTimeout(() => {
 // 检查滚动位置
}, 100);
});

使用Intersection Observer API（现代浏览器推荐）


const observer = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
 loadMore();
}
});

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


3. 添加无更多数据提示
```javascript
let hasMore = true;

async function loadMore() {
  if (!hasMore || loading) return;
  // ...加载逻辑

  if (data.length === 0) {
    hasMore = false;
    showNoMoreData();
  }
}