js 页面滑动至底部自动加载

基础概念

页面滑动至底部自动加载（也称为“无限滚动”或“滚动加载”）是一种常见的网页设计模式，用户在浏览内容时，当页面滚动到接近底部时，会自动加载更多内容，而不需要用户手动点击“加载更多”按钮。

类型

基于事件监听的实现：通过监听滚动事件来判断是否到达页面底部，并触发加载更多内容的操作。
基于Intersection Observer API的实现：使用现代浏览器提供的Intersection Observer API来更高效地检测元素是否可见。

应用场景

社交媒体平台：如新闻动态、朋友圈等。
电商网站：商品列表展示。
博客和文章网站：文章分页加载。
论坛和社区：帖子列表滚动加载。

示例代码

以下是一个基于事件监听的简单实现示例：

// 获取页面底部元素
const footer = document.querySelector('footer');

// 监听滚动事件
window.addEventListener('scroll', function() {
    // 判断是否滚动到页面底部
    if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 50) {
        // 模拟加载更多内容
        loadMoreContent();
    }
});

function loadMoreContent() {
    // 这里可以添加实际的AJAX请求或其他逻辑来加载更多内容
    console.log('Loading more content...');
    // 示例：创建一个新的段落并添加到页面中
    const newParagraph = document.createElement('p');
    newParagraph.textContent = 'New content loaded!';
    document.body.appendChild(newParagraph);
}

遇到的问题及解决方法

问题1：滚动事件触发过于频繁，导致性能问题

原因：每次滚动都会触发事件处理函数，如果处理函数中有复杂的逻辑或网络请求，会导致页面卡顿。

解决方法：

使用节流（throttle）或防抖（debounce）技术来减少事件处理函数的执行频率。
使用Intersection Observer API，它只在目标元素进入或离开视口时触发回调，效率更高。

// 使用节流函数
function throttle(func, wait) {
    let timeout = null;
    return function() {
        if (!timeout) {
            timeout = setTimeout(() => {
                func.apply(this, arguments);
                timeout = null;
            }, wait);
        }
    };
}

window.addEventListener('scroll', throttle(function() {
    if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 50) {
        loadMoreContent();
    }
}, 200));

问题2：加载更多内容时页面闪烁或布局抖动

原因：新加载的内容导致页面重新计算布局，可能会引起视觉上的不流畅。

解决方法：

预先设置好加载内容的容器样式，确保其高度不会影响整体布局。
使用CSS的position: absolute或position: fixed来固定加载提示的位置。

.loading-indicator {
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
}

function showLoadingIndicator() {
    const indicator = document.querySelector('.loading-indicator');
    indicator.style.display = 'block';
}

function hideLoadingIndicator() {
    const indicator = document.querySelector('.loading-indicator');
    indicator.style.display = 'none';
}

window.addEventListener('scroll', throttle(function() {
    if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 50) {
        showLoadingIndicator();
        loadMoreContent().then(() => hideLoadingIndicator());
    }
}, 200));

通过这些方法，可以有效实现页面滑动至底部自动加载的功能，并解决常见的性能和布局问题。