jquery滚动加载
jQuery滚动加载的实现方法
滚动加载（无限滚动）是一种常见的网页优化技术，通过监听滚动事件动态加载内容，减少初始页面负载。以下是几种实现方式：
监听滚动事件实现基础加载
$(window).scroll(function() {
if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
loadMoreContent();
}
});
function loadMoreContent() {
// 显示加载动画
$('#loader').show();
// 模拟AJAX请求
$.ajax({
url: 'your-api-endpoint',
type: 'GET',
data: { page: nextPage },
success: function(data) {
$('#content-container').append(data);
nextPage++;
$('#loader').hide();
}
});
}使用Intersection Observer API（现代浏览器推荐）
const observer = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
loadMoreContent();
}
}, { threshold: 0.1 });
observer.observe(document.querySelector('#load-more-trigger'));
function loadMoreContent() {
// 加载逻辑同上
}优化性能的注意事项
-
添加防抖函数避免频繁触发
var debounceTimer; $(window).scroll(function() { clearTimeout(debounceTimer); debounceTimer = setTimeout(function() { // 检查滚动位置 }, 250); }); -
记录当前页码和总页数，避免重复请求
-
请求失败时提供重试机制
-
移动端需要考虑触摸事件
完整示例结构
HTML部分：
<div id="content-container"><!-- 动态内容将加载到这里 --></div>
<div id="load-more-trigger" style="height:20px;"></div>
<div id="loader" style="display:none;">Loading...</div>CSS部分：
#loader {
text-align: center;
padding: 20px;
}插件推荐
对于复杂场景，可以考虑使用现成插件：
- jQuery Infinite Scroll
- Waypoints
- Lazy Load XT
这些插件提供了更完善的功能如错误处理、布局保持等。
