js 滚动加载原理

滚动加载（Infinite Scroll）是一种网页性能优化技术，主要用于提升用户在浏览长列表或大量数据时的体验。其基本原理是当用户滚动到页面底部时，自动加载并显示更多内容，而不是一次性将所有内容加载到页面上。

基本原理

监听滚动事件：通过JavaScript监听用户的滚动行为。
判断是否接近底部：在滚动事件中，计算当前滚动位置与页面总高度的关系，判断用户是否接近页面底部。
加载更多内容：当用户接近页面底部时，触发加载更多数据的操作，通常是通过AJAX请求从服务器获取新的数据。
更新DOM：将新获取的数据插入到页面的适当位置，通常是列表的底部。

优势

提升用户体验：减少一次性加载大量数据的压力，使页面加载更快，用户体验更好。
节省带宽：只加载用户当前需要查看的内容，减少不必要的数据传输。
提高页面性能：避免因加载大量DOM元素而导致的页面卡顿或崩溃。

类型

传统滚动加载：基于滚动事件触发加载。
节流滚动加载：通过节流函数限制滚动事件的触发频率，提高性能。
Intersection Observer API：一种更现代的方式，通过观察元素是否进入视口来触发加载。

应用场景

新闻列表：用户滚动浏览新闻条目。
社交媒体：加载更多帖子或评论。
电商网站：展示商品列表。

示例代码

以下是一个简单的滚动加载示例，使用原生JavaScript实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滚动加载示例</title>
    <style>
        #content {
            height: 300px;
            overflow-y: scroll;
            border: 1px solid #ccc;
        }
        .item {
            height: 50px;
            border-bottom: 1px solid #eee;
        }
    </style>
</head>
<body>
    <div id="content"></div>

    <script>
        let isLoading = false;
        let page = 1;
        const content = document.getElementById('content');

        function loadMore() {
            if (isLoading) return;
            isLoading = true;

            // 模拟AJAX请求
            setTimeout(() => {
                for (let i = 0; i < 10; i++) {
                    const item = document.createElement('div');
                    item.className = 'item';
                    item.textContent = `Item ${page * 10 + i}`;
                    content.appendChild(item);
                }
                page++;
                isLoading = false;
            }, 1000);
        }

        content.addEventListener('scroll', () => {
            if (content.scrollTop + content.clientHeight >= content.scrollHeight - 10) {
                loadMore();
            }
        });

        // 初始加载
        loadMore();
    </script>
</body>
</html>