基于jQuery/JS实现文章初始限10篇+滚动触底自动加载带加载动画

我来给你整理一个基于jQuery的实现方案，完全匹配你的需求：初始仅显示10篇文章，滚动到最后一篇可见文章时自动加载更多，加载过程中展示loading spinner。下面分步骤说明：

1. 完善HTML结构 #

先在你的容器末尾添加一个loading元素，用来显示加载状态：

<div class="container">
  <!-- 你的现有文章内容 -->
  <article class="post">...</article>
  <article class="post">...</article>
  <!-- 更多文章... -->

  <!-- Loading 元素 -->
  <div class="loading-spinner">加载中...</div>
</div>

2. 添加Loading样式 #

给loading spinner加上基础样式和动画效果，让加载状态更直观：

.loading-spinner {
  display: none; /* 默认隐藏 */
  text-align: center;
  padding: 20px 0;
  font-size: 16px;
  color: #666;
}

/* 旋转动画的spinner */
.loading-spinner::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-left: 8px;
  border: 2px solid #ddd;
  border-top-color: #333;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

3. jQuery实现核心逻辑 #

这部分是功能的核心，实现初始隐藏、滚动监听、加载触发和状态更新：

$(document).ready(function() {
  // 配置参数
  const INITIAL_SHOW_COUNT = 10; // 初始显示数量
  const LOAD_PER_TIME = 5; // 每次加载的文章数量
  const $posts = $('.container .post'); // 获取所有文章元素
  const $loading = $('.loading-spinner'); // 获取loading元素
  let currentVisibleCount = INITIAL_SHOW_COUNT; // 当前已显示的文章数量

  // 第一步：初始隐藏超出10篇的文章
  $posts.slice(INITIAL_SHOW_COUNT).hide();

  // 第二步：监听窗口滚动事件
  $(window).scroll(function() {
    // 避免重复触发加载（如果loading正在显示则跳过）
    if ($loading.is(':visible')) return;

    // 获取最后一篇可见文章的位置信息
    const $lastVisiblePost = $posts.eq(currentVisibleCount - 1);
    const postBottom = $lastVisiblePost.offset().top + $lastVisiblePost.outerHeight();
    const windowBottom = $(window).scrollTop() + $(window).height();

    // 判断是否滚动到最后一篇文章的底部附近（100px触发阈值）
    if (windowBottom >= postBottom - 100) {
      // 显示loading状态
      $loading.show();

      // 第三步：模拟异步加载（实际项目中替换为AJAX请求后端接口）
      setTimeout(function() {
        const nextStart = currentVisibleCount;
        const nextEnd = currentVisibleCount + LOAD_PER_TIME;

        // 显示新的文章
        $posts.slice(nextStart, nextEnd).show();

        // 更新已显示数量
        currentVisibleCount = nextEnd;

        // 第四步：判断是否还有更多内容
        if (currentVisibleCount >= $posts.length) {
          // 没有更多内容了，移除滚动监听并更新提示
          $(window).off('scroll');
          $loading.text('没有更多内容了');
        } else {
          // 隐藏loading，等待下一次触发
          $loading.hide();
        }
      }, 1000); // 模拟网络延迟，实际项目中删除这个setTimeout，换成AJAX请求
    }
  });
});

关键逻辑说明 #

• 初始隐藏：用slice()方法选中第10篇之后的文章，调用hide()隐藏
• 滚动判断：计算最后一篇可见文章的底部位置，对比窗口滚动到底部的位置，当距离小于100px时触发加载
• 加载控制：通过loading元素的显示状态避免重复触发加载请求
• 边界处理：当所有文章都加载完成后，移除滚动监听，防止无效触发

实际项目适配提示 #

如果你的文章是通过后端接口动态获取的（不是一次性渲染在页面中），只需要把模拟加载的setTimeout替换为AJAX请求：

// 替换模拟加载的setTimeout部分
$.get('/api/get-more-posts', { start: currentVisibleCount, count: LOAD_PER_TIME }, function(data) {
  // 假设data返回的是新文章的HTML字符串
  $('.container').append(data);
  // 更新当前已显示数量
  currentVisibleCount += LOAD_PER_TIME;
  // 隐藏loading
  $loading.hide();
  // 如果返回的内容为空，说明没有更多了
  if (!data) {
    $(window).off('scroll');
    $loading.text('没有更多内容了').show();
  }
});

内容的提问来源于stack exchange，提问作者user3567523