无限滚动是一种在网站上使用的流行技术,通过不断加载用户从网页上下游的新内容来增强用户参与。这种方法让访问者保持更长的时间,并提供一个无缝浏览体验。用 JavaScript 执行无限滚动是直截了当的,可以定制以满足各种网站需求,从社交媒体到电子商务产品上市。 在本篇文章中,我们将探索无限滚动的原因、方式和最佳做法,并用扩展的代码实例和性能考虑来完成。

为什么使用无限卷?

无限卷轴提供若干直接影响到用户参与和网站业绩的好处:

  • 减少页码的需要:[ 通过取消页面重载和手动点击,浏览会变得更加平滑,更直观,用户可以不中断地探索内容.
  • 鼓励内容发现:随着新物品自动加载,访客更有可能看到其他文章,产品,或他们否则可能错过的帖子.
  • 改进用户参与度量:[] 页面上的时间,每会话的页面,滚动深度往往会因为浏览的自然流量得到维持而增加.
  • 提供现代,动态的用户体验:[ 许多流行平台如Twitter,Pinterest,Instagram使用无限卷轴在网络上创建类似app的感觉.

然而,无限滚动并非适合每个上下文. 用户需要快速找到特定项目(如目录列表或搜索结果)的网站可能从经典页标中以页脚或"Load More"按钮受益,决定应当基于用户意图和内容结构.

基本实施无限卷

执行一个基本无限卷轴涉及在用户接近页面底部时聆听事件并附加新内容。下面是构建一个简单版本的一步步指南。

HTML 结构

设置一个容器元素, 并保留初始内容。 所有新项目将在此附件 。

<div id="content">
 <!-- Existing items loaded on page load -->
 <div class="item">Item 1</div>
 <div class="item">Item 2</div>
 <div class="item">Item 3</div>
</div>
<div id="loading-indicator" style="display:none;">Loading more content...</div>

Java 脚本示例

使用滚动事件,我们检测用户在页底部附近滚动时,阈值()防止触发器发射太晚.

const contentDiv = document.getElementById('content');
const loadingIndicator = document.getElementById('loading-indicator');
let isLoading = false; // Prevent duplicate requests

window.addEventListener('scroll', () => {
 const scrollPosition = window.innerHeight + window.scrollY;
 const documentHeight = document.body.offsetHeight;

 if (scrollPosition >= documentHeight - 200 && !isLoading) {
 loadMoreContent();
 }
});

async function loadMoreContent() {
 isLoading = true;
 loadingIndicator.style.display = 'block';

 try {
 // Simulate fetching new content from server
 const newItem = document.createElement('div');
 newItem.className = 'item';
 newItem.textContent = `New item loaded at ${new Date().toLocaleTimeString()}`;
 contentDiv.appendChild(newItem);
 } finally {
 isLoading = false;
 loadingIndicator.style.display = 'none';
 }
}

加强执行

对于制作准备的无限卷轴,必须改进性能和用户经验。

正在删除滚动事件

原始滚动事件迅速起火, 它可以降解性能。 使用解跳函数, 检查只能在滚动中短暂暂停后进行 。

function debounce(func, wait) {
 let timeout;
 return function executedFunction(...args) {
 clearTimeout(timeout);
 timeout = setTimeout(() => func.apply(this, args), wait);
 };
}

window.addEventListener('scroll', debounce(checkScrollPosition, 100));

使用交叉式观察 API

一种更高效和现代化的方法是Intersection Observer[],它监视放在内容底部的哨兵元素,并在可见时点燃回电.

const sentinel = document.createElement('div');
sentinel.id = 'scroll-sentinel';
contentDiv.after(sentinel);

const observer = new IntersectionObserver((entries) => {
 if (entries[0].isIntersecting && !isLoading) {
 loadMoreContent();
 }
});
observer.observe(sentinel);

这消除了附加卷轴听器的需要,在主线程上也明显地轻了.

慷慨地处理最后的事务

当不再存在数据时, 无限滚动应该停止尝试加载。 简单的旗或服务器的响应带有[ [FLT: 6] 属性, 就可以控制此特性 。

let hasMoreContent = true;

async function loadMoreContent() {
 if (!hasMoreContent) return;
 // ... fetch data
 if (response.data.length === 0) hasMoreContent = false;
}

正在装入 AJAX 的真实数据

要让无限滚动动态, 您必须使用 AJAX 获取服务器的数据。 Fettle API 是现代标准 。

获取 API 示例

此示例假设您的服务器提供了一个 URL 或一个页码参数的 pagized JSON 数据 。

const contentUrl = '/api/items?page=1';
let currentPage = 1;

async function loadMoreContent() {
 isLoading = true;
 loadingIndicator.style.display = 'block';

 try {
 const response = await fetch(`/api/items?page=${++currentPage}`);
 if (!response.ok) throw new Error('Network error');
 const data = await response.json();

 data.items.forEach(item => {
 const el = document.createElement('div');
 el.className = 'item';
 el.textContent = item.title;
 contentDiv.appendChild(el);
 });

 // If the server indicates no more data, disable loading
 if (data.is_last_page) hasMoreContent = false;
 } catch (error) {
 console.error('Failed to load content:', error);
 } finally {
 isLoading = false;
 loadingIndicator.style.display = 'none';
 }
}

处理服务器响应和错误

总是包含强性错误处理。 如果获取失败, 显示重试选项, 并限制重试, 避免无限的加载循环。 要更好的用户体验, 请用“ 重试” 按钮显示“ 某事出错 ” 消息 。

用户经验增强

平滑 UX 对保留用户至关重要。 以下是需要考虑的几个改进 。

装入指标

使用旋转器、 进度栏或骨架屏幕来表示正在获取更多内容。 这可以让用户放心网站正在工作 。

<div id="loading" class="loading-spinner"></div>

CSS 动画用于旋转器的轻量级,对于骨架屏幕,创建模仿最终内容布局的占位符块.

无障碍因素

无限可访问卷轴需要:

  • 焦点管理: 新项目加载时,宣布使用区域进行阅读器筛选.
  • 键盘导航:确保用户可以通过键盘(Tab)翻转新装入的内容,避免陷阱聚焦.
  • 替代无限卷轴:[ 提供"Load More"按钮作为更倾向于明确控制的用户的倒置.
<div id="content" aria-live="polite">...</div>

移动优化

在移动设备上,滚动事件经常起火,但交叉观察者更可靠。 另外,调整阈值以计入较小的视点和触摸惯性。

高级技术

对于社交媒体饲料或大目录等高性能情况,考虑这些优化.

懒惰的装入图像

新内容往往包括图像. Lazy load them 使用 属性在 ] 标记上或 Intersection Observer [ 上加载这些图像,以减少带宽,改善初始载荷时间.

<img src="placeholder.jpg" data-src="real-image.jpg" loading="lazy" alt="..." />

大列表虚拟滚动

如果您的无限卷轴管理着数千个DOM节点, 性能会下降。 虚拟卷轴( 或窗口) 只能使可见项目, 大幅降低内存使用量 。 库像 [ [[ FLT: 0]]] 或 Clusterize.js [[ [FLT: 1]] 或 React Virtualized , 会有帮助, 但 JavaScript 纯执行对于简单案件是可能的 。

预装内容

为了消除预知的滞后,在需要之前,将下一批内容预先装入隐藏容器。 当用户滚动到触发点时,只需将预装的元素交换到可见的DOM中即可。

结论

使用 JavaScript 执行无限卷轴可以提供平滑、连续浏览的经验,从而大大改善用户的参与。 从基本的卷轴听众到高级的交叉观察者和懒惰的加载,这一技术可以适应任何网站的需求。 记住平衡性能和访问,并且始终为喜欢离散页纹的用户提供倒置机制。 通过本文概述的代码和战略,你可以创建一个无限卷轴功能,使观众能够不受挫折地探索。