后端懒加载示例(以分页加载数据为例)

admin2个月前 (04-02)it知识345

场景描述

假设有一个博客系统,每页显示10篇文章,用户滚动到底部时加载下一页的文章。

前端请求代码(使用Fetch API)

JavaScript
let page = 1;
const limit = 10;
let loading = false;
window.addEventListener("scroll", function() {
    if (loading) return;
    if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 500) {
        loading = true;
        loadMoreArticles(page, limit);
    }
});
function loadMoreArticles(page, limit) {
    fetch(`/api/articles?page=${page}&limit=${limit}`)
        .then(response => response.json())
        .then(data => {
            data.articles.forEach(article => {
                // 将文章数据渲染到页面上
                const articleElement = document.createElement("div");
                articleElement.innerHTML = `<h2>${article.title}</h2><p>${article.content}</p>`;
                document.body.appendChild(articleElement);
            });
            if (data.hasMore) {
                page++;
            } else {
                window.removeEventListener("scroll", arguments.callee); // 移除滚动事件监听器(或使用其他方式避免重复加载)
            }
            loading = false;
        })
        .catch(error => {
            console.error("Error loading articles:", error);
            loading = false;
        });
}

后端代码(Node.js + Express 示例)

JavaScript
const express = require("express");
const app = express();
// 模拟数据库中的文章数据
const articles = Array.from({ length: 100 }, (_, i) => ({
    id: i + 1,
    title: `Article ${i + 1}`,
    content: `This is the content of article ${i + 1}.`
}));
app.get("/api/articles", (req, res) => {
    const page = parseInt(req.query.page) || 1;
    const limit = parseInt(req.query.limit) || 10;
    const startIndex = (page - 1) * limit;
    const endIndex = page * limit;
    const resultArticles = articles.slice(startIndex, endIndex);
    const hasMore = endIndex < articles.length;
    res.json({
        articles: resultArticles,
        hasMore: hasMore
    });
});
app.listen(3000, () => {
    console.log("Server is running on port 3000");
});

解释‌:

  • 前端部分‌:

    • 监听scroll事件,当用户滚动到底部时,发送请求加载下一页的文章。

    • 使用fetch API请求后端API,获取文章数据并渲染到页面上。

    • 使用loading变量避免重复请求。

  • 后端部分‌:

    • 接收前端请求,根据pagelimit参数返回相应的文章数据。

    • 判断是否还有更多文章,返回hasMore字段。


三、懒加载的优势

  1. 提高性能‌:减少初始加载时间,降低服务器压力。

  2. 节省带宽‌:只加载用户当前需要的数据或资源。

  3. 提升用户体验‌:加快页面响应速度,避免卡顿。

四、注意事项

  1. SEO影响‌:对于需要SEO的内容,确保懒加载的内容能被搜索引擎抓取(如使用noscript标签或SSR)。

  2. 兼容性‌:确保懒加载技术在目标浏览器上兼容(如使用IntersectionObserver API或polyfill)。

  3. 错误处理‌:处理加载失败的情况,提供备用方案或重试机制。

标签: 分享IT知识

相关文章

职场人如何写季度总结

作为职场人,写季度总结是一个展示自己工作成果和总结经验教训的机会。以下是一些撰写季度总结的建议:明确总结的目的:季度总结的目的是为了向上级领导汇报本季度的工作进展、成果和教训,以及下季度的工作计划。因...

灵动:生活中的艺术与智慧

在这个充满变化的世界里,灵动是一种独特的魅力,它让我们的生活更加丰富多彩,充满了可能性和创意。灵动不仅是一种艺术,更是一种智慧,它存在于我们的思维、情感和行动中。首先,灵动是一种艺术。在我们的生活中,...

享受工作:找到事业与生活的平衡点

工作是我们日常生活中不可或缺的一部分。我们花费大量的时间和精力在工作中,因此,如何享受工作并找到事业与生活的平衡点就显得尤为重要。在这篇文章中,我们将探讨如何享受工作,让事业和生活愉快并行。首先,了解...

湖边

湖边,一片静谧的美好。清晨的阳光洒在湖面上,波光粼粼,让人心旷神怡。湖上的荷叶轻轻摇曳,荷花争奇斗艳,仿佛在向人们展示着它们的美丽。湖边的柳树依依,芦苇丛生,形成了一道道天然的屏障,让人感到一种隐秘的...

敏捷开发

敏捷开发是一种以人为核心、迭代、循序渐进的开发方法。在敏捷开发中,软件项目的构建被切分成多个子项目,各个子项目的成果都经过测试,具备集成和可运行的特征。换言之,就是把一个大项目分为多个相互联系,但也可...

如何学习 javascript

学习JavaScript需要以下步骤:基础语法:学习JavaScript的基础语法,包括变量、数据类型、函数、循环、条件语句等。DOM 操作:学习如何操作 DOM,例如获取和修改元素、添加和删除事件处...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。