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

前端分段式渲染较长文章

news 2026/4/1 5:55:10

实现思路：

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

从单片机思维到FPGA思维：我用Xilinx Ego1做循迹小车踩过的那些‘坑’

从单片机思维到FPGA思维&#xff1a;Xilinx Ego1循迹小车开发实战避坑指南 第一次用FPGA做循迹小车时&#xff0c;我盯着Vivado里密密麻麻的时序报告发呆了半小时——这和我熟悉的单片机开发完全是两个世界。作为有三年STM32开发经验的工程师&#xff0c;本以为凭借Verilog语法…...

编程新知 2026/4/1 4:56:25

MIKE URBAN中污水处理厂如何进行概化

01 前言应用厂网一体化耦合模型研究水厂间调度和厂前溢流入河污染量等内容时&#xff0c;由于不需要关注污水处理厂内部的具体处理工艺&#xff0c;需要对污水处理厂的关键设施进行概化处理。02 水厂资料收集收集污水处理的工艺流程图和设施设计参数。依据厂网一体化模型的研究…...

编程新知 2026/4/1 3:51:38

【卷积神经网络作业实现人脸的关键点定位功能】

下面是完成这道题目的代码&#xff1a;import os import cv2 import numpy as np import pandas as pd import torch import torch.nn as nn from torch.utils.data import Dataset,DataLoader from torchvision import transforms import matplotlib.pyplot as plt1. 数据集定…...

编程新知 2026/4/1 3:51:38

如何快速上手AutoGPT-Next-Web：5分钟搭建专属AI助手

如何快速上手AutoGPT-Next-Web&#xff1a;5分钟搭建专属AI助手 【免费下载链接】AutoGPT-Next-Web &#x1f916; Assemble, configure, and deploy autonomous AI Agents in your browser.一键免费部署你的私人AutoGPT 网页应用 项目地址: https://gitcode.com/gh_mirrors/…...

编程新知 2026/4/1 3:47:33

如何通过炉石传说自动化工具实现游戏效率提升？

如何通过炉石传说自动化工具实现游戏效率提升&#xff1f; 【免费下载链接】Hearthstone-Script Hearthstone script&#xff08;炉石传说脚本&#xff09;&#xff08;2024.01.25停更至国服回归&#xff09; 项目地址: https://gitcode.com/gh_mirrors/he/Hearthstone-Scrip…...

编程新知 2026/4/1 3:22:58

【Matlab】MATLAB教程：图形句柄；案例：h=plot(x,y)；应用：控制图形属性

MATLAB教程：图形句柄；案例：h=plot(x,y)；应用：控制图形属性 在MATLAB数据可视化、实验报告绘图、工程结果展示等场景中，仅仅通过plot函数绘制基础图形远远不够。实际科研与工程应用中，往往需要精准调整图形的线条样式、颜色、标记点、坐标轴、图例等属性，让图形更清晰、…...

编程新知 2026/4/1 3:20:57

BabyOS：MCU裸机开发的轻量级框架解析

1. BabyOS&#xff1a;专为MCU裸机开发设计的轻量级框架 在嵌入式开发领域&#xff0c;重复造轮子一直是困扰工程师的痛点。每次新项目启动&#xff0c;我们总需要重新调试那些基础功能模块——从串口通信到Flash操作&#xff0c;从定时器管理到协议栈实现。BabyOS的出现&#…...

编程新知 2026/4/1 3:14:55

避坑指南：nRF52840蓝牙DFU配置中那些官方文档没细说的‘坑’（基于SDK 17.1.0）

nRF52840蓝牙DFU实战避坑手册&#xff1a;从原理到解决方案的深度解析 在嵌入式开发领域&#xff0c;无线固件升级(DFU)功能已成为蓝牙产品的标配需求。nRF52840作为Nordic Semiconductor的旗舰级蓝牙SoC&#xff0c;配合其完善的SDK支持&#xff0c;理论上应该能够轻松实现这一…...

编程新知 2026/4/1 2:36:19

快速原型构建遇阻？用快马AI一键绕过npm error 128，聚焦核心功能验证

最近在尝试用Node.js快速验证一个Web服务原型时&#xff0c;遇到了烦人的npm error code 128问题。这个错误通常和Git仓库权限相关&#xff0c;会直接卡住依赖安装流程。经过一番折腾&#xff0c;我总结出一套在InsCode(快马)平台快速绕开这个坑的实践方案&#xff0c;分享给同…...

编程新知 2026/4/1 2:03:58

AI头像生成器实战：用Qwen3-32B为你的社交头像设计专属描述文案

AI头像生成器实战&#xff1a;用Qwen3-32B为你的社交头像设计专属描述文案 1. 为什么你需要一个AI头像生成器 在社交媒体时代&#xff0c;一个独特的头像已经成为个人品牌的重要组成部分。无论是LinkedIn上的专业形象&#xff0c;还是Instagram上的创意展示&#xff0c;头像都…...

编程新知 2026/3/31 22:46:31