Cuộn cuộn cuộn vô hạn chạy bằng Javascript để khởi động người dùng tốt hơn

Cuộn vô hạn là một kỹ thuật phổ biến dùng trên trang Mạng để tăng cường sự gắn kết người dùng bằng cách tiếp tục tải nội dung mới như người dùng cuộn xuống trang. Cách tiếp cận này giữ cho du khách tham gia lâu hơn và cung cấp một kinh nghiệm duyệt không giới hạn. Đọc cuộn giấy không biên dịch vô hạn với JavaScript là đơn giản và có thể tùy chỉnh để phù hợp với các nhu cầu trang Mạng khác nhau, từ dữ liệu truyền thông xã hội cho đến danh sách sản phẩm e- commerce. Trong bài này, chúng tôi sẽ khám phá lý do, và các thực hành tốt nhất của cuộn giấy vô hạn, hoàn thành với các ví dụ mã mở rộng và xem xét hiệu suất.

Tại sao dùng cuộn sách vô hạn?

Cuộn giấy vô hạn mang lại nhiều lợi ích ảnh hưởng trực tiếp đến việc tham gia và hiệu suất trang web:

• [FLT: 0] Để khuyến khích sự sắp xếp: [FLT: 1] bằng cách loại bỏ việc tải và nhấn tay trang, duyệt trở nên mịn hơn và trực quan hơn. Người dùng có thể khám phá nội dung mà không bị ngắt quãng.
• Khi những vật dụng mới tự động nạp, khách có thể sẽ thấy thêm những bài, sản phẩm, hoặc những bài viết khác mà họ có thể bỏ lỡ.
• [FLT: 0] Ghi chú về thời gian cho người dùng: [FLT: 1] Thời gian trên trang, trang mỗi phiên chạy và cuộn thường tăng vì dòng chảy tự nhiên của việc duyệt được duy trì.
• Bảo tồn một trải nghiệm người dùng hiện đại, năng động: Nhiều nền tảng phổ biến như Twitter, Pest, và Skype sử dụng cuộn giấy vô tận để tạo ra một cảm giác giống ứng dụng trên web.

Tuy nhiên, cuộn vô hạn không thích hợp với mọi văn cảnh. Nơi người dùng cần tìm các mục riêng một cách nhanh chóng (v. d., danh sách thư mục hoặc kết quả tìm kiếm) có thể được lợi ích từ việc tạo lại kiểu nút « Ghi chú kiểu cổ điển » hay « Tự động thêm ». Quyết định nên dựa trên ý định và cấu trúc nội dung của người dùng.

Sự tích cực cơ bản của cuộn sách vô tận

Thi hành một cuộn giấy vô hạn bao gồm việc lắng nghe sự kiện [FLT: 0] và phụ thêm nội dung mới khi người dùng tiến tới cuối trang.

Cấu trúc HTML

Thiết lập một phần tử container giữ nội dung ban đầu. Mọi mục mới sẽ được phụ thêm vào đây.

<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>

Ví dụ JavaScript

Dùng sự kiện cuộn sách, chúng tôi phát hiện khi người dùng cuộn gần cuối trang.

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';
 }
}

Làm tăng sự phấn khởi

Để có được một cuộn sách vô tận, phải tinh luyện cho hiệu suất và kinh nghiệm người dùng.

Làm mất hứng thú với việc cuộn sách

Sự kiện cuộn thô phát ra một cách nhanh chóng, có thể làm giảm hiệu suất. Dùng chức năng debounce để kiểm tra chạy sau một thời gian tạm dừng trong cuộn.

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));

Dùng máy đo độ cao giao diện

Một phương pháp hữu hiệu hơn và hiện đại hơn là [FLT: 0] Inter Over ). Nó giám sát một phần tử lính canh đặt ở đáy nội dung và đốt lại một cuộc gọi khi nó trở nên hữu hình.

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);

Điều này loại bỏ việc cần gắn người nghe cuộn sách và nhẹ nhàng hơn nhiều trên sợi chỉ chính.

Dùng sự hòa thuận một cách ân hậu

Khi không còn dữ liệu nữa, cuộn vô hạn nên dừng lại cố tải. Một cờ đơn giản hoặc một lời đáp từ máy phục vụ với tài sản có thể điều khiển tính chất này.

let hasMoreContent = true;

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

Đang nạp dữ liệu thật với AJAX

Để tạo ra một cuộn giấy vô hạn, bạn phải lấy dữ liệu từ máy chủ bằng AJAX. ERI là tiêu chuẩn hiện đại.

Lấy ví dụ về ADI

Ví dụ này giả sử trình phục vụ của bạn cung cấp dữ liệu JSON có sẵn hoặc tham số số trang.

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';
 }
}

Đáp ứng và lỗi của máy phục vụ chạy

Luôn luôn có lỗi xử lý mạnh. Hiển thị một tùy chọn thử lại nếu việc lấy bị lỗi, và tránh chuỗi tải vô hạn bằng cách hạn chế các vòng lặp. Đối với một người dùng có kinh nghiệm tốt hơn, hiển thị một thông điệp « Có gì đó không đúng » bằng cái nút « Thử lại ».

Tăng cường kinh nghiệm người dùng

Đường cong UX là quan trọng để giữ lại người dùng. Sau đây là một số cải tiến cần xem xét.

Đang nạp các chỉ thị

Dùng thanh phát triển, thanh quay, hay màn hình tiến trình để ngụ ý nội dung nhiều hơn đang được lấy. Điều này trấn an người dùng rằng trang web đang hoạt động.

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

Hoạt hình CSS cho spinner là nhỏ. Đối với màn hình xương, tạo các khối giữ chỗ, mô phỏng bố trí nội dung cuối cùng.

Xem xét khả năng truy cập

Cần thiết cuộn vô hạn truy cập:

• Quản lý Feocus:) Khi mục mới tải, thông báo chúng đến các vùng bằng màn hình .
• Định vị bảng:) Người dùng bảo mật có thể chuyển nội dung mới tải qua bàn phím (Tab). Tránh đặt tiêu điểm bị mắc bẫy.
• Viết tắt cho cuộn vô hạn:[FLT: 1) cung cấp một nút "Load More" như là một hậu phương cho người dùng thích điều khiển rõ ràng.

<div id="content" aria-live="polite">...</div>

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