jquery 分段加载

基础概念

jQuery 分段加载（也称为分页加载或懒加载）是一种网页优化技术，用于提高网页的加载速度和用户体验。它通过将网页内容分成多个部分，并在用户滚动到页面底部时动态加载更多内容，而不是一次性加载所有内容。

优势

提高加载速度：减少初始加载时间，因为只加载用户当前需要的内容。
节省带宽：减少不必要的数据传输，节省用户的带宽资源。
提升用户体验：用户可以更快地看到页面内容，并且可以根据需要加载更多内容。

类型

无限滚动：当用户滚动到页面底部时，自动加载更多内容。
分页加载：用户点击“下一页”按钮时，加载更多内容。
懒加载图片：只有当图片进入用户视口时，才加载图片。

应用场景

新闻网站：显示大量文章列表，用户可以滚动查看更多文章。
电商网站：展示大量商品，用户可以滚动查看更多商品。
社交媒体：显示大量帖子，用户可以滚动查看更多帖子。

示例代码

以下是一个简单的 jQuery 无限滚动示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Infinite Scroll</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="content">
        <!-- 初始内容 -->
        <p>Content 1</p>
        <p>Content 2</p>
        <p>Content 3</p>
    </div>
    <div id="loading">Loading...</div>

    <script>
        $(window).scroll(function() {
            if($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
                $('#loading').show();
                // 模拟加载更多内容
                setTimeout(function() {
                    var newContent = '<p>Content ' + ($('p').length + 1) + '</p>';
                    $('#content').append(newContent);
                    $('#loading').hide();
                }, 1000);
            }
        });
    </script>
</body>
</html>