当前位置： 首页 > news >正文

前端分段式渲染较长文章

news 2026/4/1 7:25:56

实现思路：

1. 后端返回整篇文章。

2. JavaScript 分段处理：将文章按一定的字符或段落长度分割，然后逐步将这些段落追加到页面上。

3. 定时器或递归调用：使用 setInterval 或 setTimeout 来控制段落的逐步渲染。

代码实现示例

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>流体文章渲染 - 狂人日记</title><style>* {box-sizing: border-box;}body {font-family: "Microsoft YaHei", Arial, sans-serif;padding: 20px;background-color: #f4f4f4;}.article-container {width: 100%;max-width: 600px;margin: 0 auto;background-color: white;padding: 20px;border-radius: 8px;box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);}.loading {font-style: italic;color: gray;}/* 防止自动换行，保证连续渲染的文字不强制换行 */.no-break {white-space: pre-wrap; /* 保留文本中的换行和空格 */word-wrap: break-word; /* 超出宽度时自动换行 */}</style>
</head>
<body><div class="article-container" id="articleContainer"><div id="content" class="no-break"></div><div id="loadingIndicator" class="loading">正在加载更多内容...</div>
</div><script>// 鲁迅《狂人日记》较长片段const longArticle = `《狂人日记》鲁迅今天晚上，很好的月光。我不见他已经有三十多年；我知道我本来是病了。今天看见他的眼睛，又让我害怕起来。我知道，他在害我。他的眼睛……今天真不对，和平时不一样。我想，他一定是早已预备下手，今天晚上便要动手的了。我的心跳得很厉害；不过我早已知道他会这样预备。他们都是这样，想法，害我。今天晚上，我忽然想起二十多年前，他对我说的一句话：“吃人。”吃人！这真叫我吓了一跳。我没有想到。他说得这么直截了当，这么认真。以前，我看见书上说“吃人”，总以为是瞎说。今天晚上，我才知道，书上说的竟是真的。我躺在床上，睁着眼睛，仔细想了想，越想越觉得害怕；因为我忽然想到，他们害人，还不只是今天，从古以来，他们就是这样。吃人！我想了半夜，差不多明白了：我自己也有过吃人的念头，我也有过要吃人的时候。这种想法，是从古代传下来的，如今我才懂得。 过去的历史，处处是吃人的记载。至于他们怎么吃，我全都知道了…… 但是，我绝对不愿再去吃人了！我想着，想着，忽然感到无比的悲哀，因为，我觉得自己完全陷在了这个吃人的大陷阱里，摆脱不开。我真想大叫几声：“不要吃人！不要再吃人！”可是喊不出来。我心里越发沉重，好像被无数的锁链绑住一般。昨天晚上，我又梦见他们了，他们全都聚在一起，脸上带着一种恶毒的笑容，像狼群一样盯着我。今天我终于明白了，他们早已准备好了，等着我入圈套呢。他们不是要吃我的肉，而是要夺走我的灵魂。我的心里越来越沉重，几乎要崩溃了……天哪，我究竟该怎么办？`;const contentElement = document.getElementById('content');const loadingIndicator = document.getElementById('loadingIndicator');let currentIndex = 0;const CHUNK_SIZE = 150; // 每次渲染的字符数调整为150，显示更多内容// 分段渲染文章内容function renderNextChunk() {if (currentIndex < longArticle.length) {const nextChunk = longArticle.slice(currentIndex, currentIndex + CHUNK_SIZE);contentElement.textContent += nextChunk; // 追加文本，不创建新段落currentIndex += CHUNK_SIZE;// 如果文章未加载完，继续调用下一个 chunksetTimeout(renderNextChunk, 1000); // 每1秒渲染下一段} else {loadingIndicator.style.display = 'none'; // 隐藏加载提示}}// 启动渲染renderNextChunk();
</script></body>
</html>

相关文章：

前端分段式渲染较长文章

实现思路&#xff1a; 1. 后端返回整篇文章。 2. JavaScript 分段处理&#xff1a;将文章按一定的字符或段落长度分割&#xff0c;然后逐步将这些段落追加到页面上。 3. 定时器或递归调用&#xff1a;使用 setInterval 或 setTimeout 来控制段落的逐步渲染。 代码实现示例 …...

编程日记 2024/9/19 10:21:24

C#程序员的堕落从nuget开始：将自己的代码发布到nuget

初级代码游戏的专栏介绍与文章目录-CSDN博客 我的github&#xff1a;codetoys&#xff0c;所有代码都将会位于ctfc库中。已经放入库中我会指出在库中的位置。 这些代码大部分以Linux为目标但部分代码是纯C的&#xff0c;可以在任何平台上使用。 源码指引&#xff1a;github源…...

编程日记 2024/9/19 10:20:23

【C/C++语言系列】malloc、calloc和realloc区别和用法

这三个函数都是在堆区分配内存的函数&#xff0c;头文件都是&#xff1a; #include<stdlib.h>下面分别介绍这三个函数&#xff1a; malloc&#xff1a; 函数原型&#xff1a; void *malloc(unsigned int num_bytes);功能&#xff1a;堆区开辟一段内存空间 num_nytes&…...

编程日记 2024/9/19 10:17:20

【Linux】POSIX信号量与、基于环形队列实现的生产者消费者模型

目录 一、POSIX信号量概述 信号量的基本概念 信号量在临界区的作用 与互斥锁的比较 信号量的原理 信号量的优势 二、信号量的操作 1、初始化信号量&#xff1a;sem_init 2、信号量申请&#xff08;P操作&#xff09;&#xff1a;sem_wait 3、信号量的释放&#xff08…...

编程日记 2024/9/19 10:15:54

Spring Boot-消息队列相关问题

Spring Boot 消息队列相关问题及解决方案 消息队列&#xff08;Message Queue, MQ&#xff09;在分布式系统中的应用越来越广泛&#xff0c;尤其是在解耦系统、异步通信、负载均衡等场景中起到了至关重要的作用。消息队列为不同的服务提供了一种异步通信的机制&#xff0c;使得…...

编程日记 2024/9/19 10:13:29

[数据集][目标检测]岩石种类检测数据集VOC+YOLO格式4766张9类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;4766 标注数量(xml文件个数)&#xff1a;4766 标注数量(txt文件个数)&#xff1a;4766 标注…...

编程日记 2024/9/19 10:11:22

图像分割基本知识

计算机视觉和图像处理 Tensorflow入门深度神经网络图像分类目标检测图像分割 图像分割 一、目标分割1.1 图像分割的定义1.2 任务类型1.2.1 任务描述1.2.2 任务类型 二、语义分割2.1 FCN网络2.1.1网络结构 2.2 Unet网络 三、UNet案例3.1 数据集获取3.1.1 设置相关信息3.1.2 图像…...

编程日记 2024/9/19 10:10:15

LIN总线CAPL函数——干扰LIN帧响应段（linInvertRespBit )

&#x1f345; 我是蚂蚁小兵&#xff0c;专注于车载诊断领域&#xff0c;尤其擅长于对CANoe工具的使用&#x1f345; 寻找组织 &#xff0c;答疑解惑&#xff0c;摸鱼聊天&#xff0c;博客源码&#xff0c;点击加入&#x1f449;【相亲相爱一家人】&#x1f345; 玩转CANoe&…...

编程日记 2024/9/19 10:06:52

【30天玩转python】网络编程基础

网络编程基础 网络编程是指编写能够在网络上进行通信的程序&#xff0c;通过网络进行数据的发送与接收。Python 提供了许多库和工具来进行网络编程&#xff0c;如 socket、urllib 和 requests。在这篇文章中&#xff0c;我们将介绍网络编程的基础知识&#xff0c;并演示如何使…...

编程日记 2024/9/19 10:05:51

【PCB工艺】如何实现PCB板层间的互连

系列文章目录 1.元件基础 2.电路设计 3.PCB设计 4.元件焊接 5.板子调试 6.程序设计 7.算法学习 8.编写exe 9.检测标准 10.项目举例 11.职业规划 文章目录 前言①、什么是通孔②、通孔是怎样产生的③、通孔种类④、盘中孔⑤、设计建议 前言 送给大学毕业后找不到奋斗方向的你…...

编程日记 2024/9/19 10:03:35

FastAPI--如何自定义Docs UI，包括多个APP、静态资源、元数据等

如何mount 一个FastAPI Application? “Mounting” means adding a completely “independent” application in a specific path, that then takes care of handling everything under that path, with the path operations declared in that sub-application. 示例代码 主…...

编程日记 2024/9/19 10:02:34

【FPGA XDMA AXI Bridge 模式】PCIe:BARs 和 AXI:BARs 含义解析

一. XDMA IP核两种模式 Xilinx的 DMA/Bridge Subsystem for PCI Express IP核中&#xff0c;支持普通的XDMA模式&#xff0c;但是这种模式只允许主机端发起PCIe 读写请求&#xff0c;FPGA内部无法主动发起读写请求&#xff0c;也即FPGA无法主动读写HOST的内存。 而该IP核的另…...

编程日记 2024/9/19 10:01:33

嵌入式-QT学习-小练习

1. 实现多窗口 2. 给按键增加图标 3. 动图展示 结果演示&#xff1a; Mul_Con main.cpp #include "widget.h"#include <QApplication>int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); }一、第一个窗口展示 …...

编程日记 2024/9/19 10:00:31

使用 Flask-Limiter 和 Nginx 实现接口访问次数限制

在现代 Web 应用中&#xff0c;针对敏感接口&#xff08;如短信验证码、登录接口等&#xff09;的访问次数限制至关重要。通过设置合理的限流策略&#xff0c;可以有效防止接口滥用&#xff0c;避免过多的资源消耗&#xff0c;并提升安全性。本文将通过 Nginx 和 Flask-Limiter…...

编程日记 2024/9/19 9:58:25

【数据结构】排序算法---冒泡排序

文章目录 1. 定义2. 算法步骤3. 动图演示4. 性质5. 算法分析6. 代码实现C语言PythonJavaCGo 结语 1. 定义 冒泡排序&#xff08;英语&#xff1a;Bubble sort&#xff09;是一种简单的排序算法。它重复地走访过要排序的数列&#xff0c;一次比较两个元素&#xff0c;如果它们的…...

编程日记 2024/9/19 9:49:49

mysql数据库中事务锁的机制

读锁又称为共享锁&#xff0c;简称S锁&#xff0c;共享锁就是多个事务对于同一数据可以共享一把锁&#xff0c;都能访问到数据&#xff0c;但是只能读不能修改。 写锁又称为排他锁&#xff0c;简称X锁&#xff0c;排他锁就是不能与其他所并存&#xff0c;如一个事务获取了一个…...

编程日记 2024/9/19 9:43:25

并发工具类-CountDownLatch

CountDownLatch 是 Java 中提供的一种非常有用的并发工具类&#xff0c;位于 java.util.concurrent 包中。它可以使一个或多个线程等待其他线程完成一组特定的操作后再继续执行。CountDownLatch 通过维护一个计数器来实现这一点&#xff0c;计数器的初始值由构造函数设定。每当…...

编程日记 2024/9/19 9:41:15

进程的重要函数

进程的重要函数: fork函数 了解fork函数 通过调用fork()函数&#xff0c;则会产生一个新的进程。调用fork()函数的进程叫做 父进程&#xff0c;产生的新进程则为子进程。 其编码过程: 1.函数功能: 函数头文件 #include <sys/types.h> #include <unistd.h> 函数…...

编程日记 2024/9/19 9:40:14

python 实现average median平均中位数算法

average median平均中位数算法介绍 平均&#xff08;Mean&#xff09;和中位数&#xff08;Median&#xff09;是统计学中常用的两个概念&#xff0c;用于描述一组数据的中心趋势&#xff0c;但它们并不是算法&#xff0c;而是数据处理的结果。不过&#xff0c;我可以解释如何…...

编程日记 2024/9/19 9:39:13

HTML概述

1. HTML概述 1.1 HTML定义 HTML超文本标记语言&#xff0c;其中超文本是链接&#xff0c;标记也叫标签&#xff08;即带尖括号的文本&#xff09;。 1.2 HTML基本骨架 HTML基本骨架是网页模板。 <html><head><title>网页的标题</title></head&…...

编程日记 2024/9/19 9:38:09

Llama-3.2V-11B-cot实战：基于SpringBoot构建企业级智能客服原型

Llama-3.2V-11B-cot实战&#xff1a;基于SpringBoot构建企业级智能客服原型 最近在帮一个朋友的公司做技术选型&#xff0c;他们想快速搭建一个智能客服原型&#xff0c;既要成本可控&#xff0c;又要能快速集成到现有的Java技术栈里。聊了一圈&#xff0c;发现很多团队都卡在…...

编程新知 2026/4/1 6:41:59

远程协助工具

# 详见&#xff1a;https://mp.weixin.qq.com/s/sY-KrOqpY3C1JUeiELEJNw # 来源&#xff1a;https://chat.qwen.ai/# ToDesk https://www.todesk.com/# 向日葵 https://sunlogin.oray.com/# TeamViewer https://www.teamviewer.com/# AnyDesk https://anydesk.com/ https://any…...

编程新知 2026/4/1 6:29:39

大厂Agent开发工程师亲授！这份核心技术学习路线助你轻松拿下高薪Offer！

结合个人实际的工作内容和招聘市场对于Agent开发的能力要求&#xff08;阅读汇总了大量大厂的Agent开发招聘面经&#xff09;&#xff0c;我总结了一份核心技术学习路线。 这个学习路线由浅到深&#xff0c;基本覆盖了现在大厂对于Agent开发的技术要求&#xff0c;技术栈完全可…...

编程新知 2026/4/1 6:13:23

seo排名大师软件好用吗

SEO排名大师软件好用吗&#xff1f;深入解析其优缺点 在当今数字化营销的环境中&#xff0c;SEO&#xff08;搜索引擎优化&#xff09;已成为网站提升流量、吸引潜在客户的重要手段。而SEO排名大师软件作为一种工具&#xff0c;是否真的能帮助我们实现目标&#xff1f;本文将深…...

编程新知 2026/4/1 4:34:08

4个核心功能实现智能散热：FanControl个性化温控指南

4个核心功能实现智能散热&#xff1a;FanControl个性化温控指南 【免费下载链接】FanControl.Releases This is the release repository for Fan Control, a highly customizable fan controlling software for Windows. 项目地址: https://gitcode.com/GitHub_Trending/fa/F…...

编程新知 2026/4/1 4:21:54

新手福音，用快马AI生成2048论坛登录页，轻松理解Web开发基础

今天想和大家分享一个特别适合新手入门的Web开发小项目——用InsCode(快马)平台快速搭建2048论坛的登录页面。作为刚接触编程的小白&#xff0c;我第一次看到这个需求时有点懵&#xff0c;但通过平台提供的AI生成功能&#xff0c;不仅快速实现了页面&#xff0c;还弄懂了每个环…...

编程新知 2026/4/1 4:09:45

JS脚本实现IE11自动跳转Chrome的完整配置指南（含ActiveX控件启用详解）

1. 为什么需要IE11自动跳转Chrome&#xff1f; 很多企业还在使用老旧系统&#xff0c;这些系统往往只兼容IE11浏览器。但IE11性能差、安全性低&#xff0c;用起来特别卡顿。我去年给一家制造企业做系统升级时就遇到过这种情况——他们的ERP系统只能在IE11运行&#xff0c;但财…...

编程新知 2026/4/1 2:44:24

货车行车记录仪被破坏手工修复成功

由于视频记录了打架过程&#xff0c;很重要&#xff0c; 客户在第一次查看时没问题&#xff0c;再次想拷贝&#xff0c;发现内容都没有了只有USC文件&#xff0c;使用容量也有&#xff0c;如图 好在客户没有再次破坏&#xff0c;TS视频文件&#xff0c;同行通过恢复软件恢复&am…...

编程新知 2026/4/1 2:40:20

WSL 启动闪退问题排查

第一步&#xff1a;检查当前状态在开始折腾 BIOS 之前&#xff0c;我们先确认一下系统到底有没有识别到虚拟化。按下快捷键 Ctrl Shift Esc 打开任务管理器。点击左侧的“性能”图标&#xff0c;选择 “CPU”。看右下角的信息&#xff0c;找到 “虚拟化”&#xff1a;如果是“…...

编程新知 2026/4/1 2:18:02

【NX二次开发】cam对象类型

//此函数的功能是打印当前坐标系试图的所有坐标系名称 static void geom_list_name(tag_t group_tag) { //ask_member_list int count=0; tag_t *list=NULL; //ask_name char name[UF_OBJ_NAME_LEN+1]; //ask_type_and_subtype int type=0; in…...

编程新知 2026/4/1 1:59:54