本文详解如何在网页加载过程中，从预设语句池中随机选取一条文本，并以打字机（typewriter）效果动态逐字呈现于加载遮罩层中，全程无需第三方库，纯原生 javascript 实现。
在构建现代 Web 加载体验时，静态“Loading…”提示已显单调。为提升用户感知流畅度与品牌调性，越来越多项目采用动态随机引述 + 打字机动画作为加载过渡——既缓解等待焦虑，又强化视觉记忆。本文提供一套轻量、可靠、可即插即用的实现方案，兼容 jQuery（如需），亦可轻松迁移至原生 DOM 操作。
✅ 核心逻辑解析
关键问题在于：原始代码中 txt 被错误赋值为整个 quotes 数组，导致 txt.charAt(i) 报错（数组无 charAt 方法）。正确做法是——先随机选句，再对单条字符串执行逐字渲染。
以下是优化后的完整 JavaScript 实现（兼容您现有 HTML 与 CSS）：
$(document).ready(function () {
const quotes = [
"Loading sweet video's...",
"Loading... One pixel at a time...",
"Lights, camera, action...",
"Framing imagination, crafting reality..."
];
// 1. 随机选取一句
const randQuote = quotes[Math.floor(Math.random() * quotes.length)];
// 2. 在 #element 内创建空 元素（避免重复追加）
$('#element').empty().text(''); // 更安全的清空方式
// 3. 定义打字函数
let i = 0;
const speed = 50; // 毫秒/字符，可按需调整节奏
function typeWriter() {
if (i < randQuote.length) {
$('#element').text(randQuote.substring(0, i + 1)); // 使用 text() 避免 XSS 风险
i++;
setTimeout(typeWriter, speed);
}
}
// 4. 立即启动打字动画
typeWriter();
});
? 为什么用 .text() 而非 .html() 或 innerHTML？text() 自动转义 HTML 字符（如 ），防止因引述内容含特殊符号引发 DOM 解析异常或潜在 XSS 风险；若引述中确需内联样式（极少见），请改用 html() 并确保内容可信。
? 与加载流程无缝协同
您的 CSS 已通过 transition-delay 控制各元素淡出时机，JavaScript 侧只需确保打字在 .loader-random-quote 可见前完成初始化。当前 $(document).ready() 触发时机合理（DOM 就绪后立即开始打字），而最终 window.load 后的遮罩移除逻辑保持不变，二者天然解耦。
补充建议：为增强健壮性，可在 typeWriter 结束后添加回调，例如：
if (i >= randQuote.length) {
// 可选：打字完成后添加微交互，如光标闪烁暂停 800ms 再触发隐藏
setTimeout(() => {
$('.loader-random-quote').addClass('typing-complete');
}, 800);
}对应 CSS 可添加：
.loader-random-quote.typing-complete::after {
content: "|";
animation: blink 1s infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }⚠️ 注意事项与最佳实践
- 性能友好：本方案使用 setTimeout 而非 setInterval，避免定时器堆积；字符级操作开销极低，适用于任意长度引述（建议 ≤ 60 字以保障加载体验）。
-
响应式适配：.loader-random-quote 的 font-size: 2em 在移动端可能过大，推荐改用 clamp() 或媒体查询优化：
font-size: clamp(1rem, 2.5vw, 2rem);
-
无障碍支持：为屏幕阅读器用户提供语义化支持，可在
上添加 aria-live="polite"，使其在内容更新时自动播报。
- 扩展性提示：如需从 API 动态获取引述，将 quotes 替换为 fetch() Promise 链即可，注意在 then() 中调用 typeWriter。
至此，您已拥有一套简洁、稳定、专业级的加载期打字机引述系统——无需依赖 Typed.js 等外部库，零构建配置，开箱即用。每一次页面刷新，都是一次独一无二的视觉问候。
