实现页面加载时随机显示并逐字打字的引述效果

本文详解如何在网页加载过程中，从预设语句池中随机选取一条文本，并以打字机（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 等外部库，零构建配置，开箱即用。每一次页面刷新，都是一次独一无二的视觉问候。