滚动加载|内容懒加载 js实现滚动条触底后自动加载更多内容的方法

JS实现懒加载的实战指南

2025年8月最新动态
近期谷歌Chrome团队在性能优化报告中指出，采用智能滚动加载的网页平均减少42%的初始加载时间，这种技术正逐渐成为移动端内容展示的黄金标准，尤其适合电商商品列表、社交平台动态等场景。

什么是滚动加载？

滚动加载（俗称"懒加载"）就像自动续杯的咖啡——当用户滚动到页面底部时，系统自动追加新内容，无需点击"加载更多"按钮，这种设计既能提升用户体验，又能减轻服务器压力。

实现原理三步走

1. 监听滚动事件：盯住滚动条的位置
2. 判断触底条件：计算是否滚到底部
3. 发起数据请求：获取新内容并渲染

手把手代码实现

基础版（纯JavaScript）

let isLoading = false; // 防止重复加载的开关
const container = document.getElementById('content-container');
window.addEventListener('scroll', () => {
  // 1. 计算关键距离
  const { scrollTop, clientHeight, scrollHeight } = document.documentElement;
  // 2. 距离底部200px时触发 + 防抖判断
  if (scrollTop + clientHeight >= scrollHeight - 200 && !isLoading) {
    loadMoreData();
  }
});
async function loadMoreData() {
  isLoading = true;
  // 显示加载动画（可选）
  document.getElementById('loader').style.display = 'block';
  try {
    // 3. 模拟API请求
    const newData = await fetch('/api/get-more-data');
    // 4. 插入新内容
    container.innerHTML += generateHTML(newData);
  } catch (error) {
    console.error('加载失败:', error);
  } finally {
    isLoading = false;
    document.getElementById('loader').style.display = 'none';
  }
}

优化技巧（2025年推荐方案）

1. IntersectionObserver API（更高效的观察者模式）

   const observer = new IntersectionObserver((entries) => {
   if (entries[0].isIntersecting) {
    loadMoreData();
   }
   }, { threshold: 0.1 });

observer.observe(document.querySelector('#sentinel')); // 页面底部放置一个哨兵元素

2. **请求节流**  
```javascript
let lastCallTime = 0;
function throttleLoad() {
  const now = Date.now();
  if (now - lastCallTime > 1000) { // 1秒内只触发1次
    loadMoreData();
    lastCallTime = now;
  }
}

常见问题解决方案 闪烁怎么办？**

A：在插入新内容前先计算容器高度，使用requestAnimationFrame确保流畅渲染

Q：移动端不触发？
A：检查CSS是否给body设置了overflow: hidden，改为overflow-x: hidden

Q：如何实现骨架屏加载？

// 先插入占位元素
container.innerHTML += `<div class="skeleton-loader"></div>`;
// 数据返回后替换真实内容

性能监控建议

2025年主流浏览器已支持content-visibility: auto属性，搭配滚动加载可使渲染性能提升3倍，建议在CSS中添加：

.lazy-item {
  content-visibility: auto;
  contain-intrinsic-size: 300px; /* 预估高度 */
}

最后的小贴士
测试时记得快速滚动测试边界情况，服务器端建议实现分页缓存，现在你已掌握让页面"无限续杯"的秘籍,快去优化你的长列表吧！