实现页面加载时随机显示一句文案并逐字打字机式呈现

本文详解如何在网页加载遮罩层中，动态选取随机文案，并通过纯 javascript 实现平滑、可控的逐字打字机效果，兼容现代浏览器且无需第三方库。

在构建品牌化加载页（Loader）时，静态文字易显单调，而加入随机性与动态打字效果，可显著提升用户体验与视觉专业度。本文提供一套轻量、可靠、零依赖的实现方案——基于原生 JavaScript 实现「随机文案 + 逐字 Typewriter 效果」，完美适配您已有的 CSS 加载器结构。

✅ 核心逻辑解析

关键问题在于：原始代码中 txt 被错误赋值为整个 quotes 数组，导致 txt.charAt(i) 报错（数组无 charAt 方法）。修正后需确保：

• 随机选取单条字符串（randno）作为待打字文本；
• #element 容器预先留空，避免重复插入或 HTML 解析干扰；
• 打字函数 typeWriter() 在 dom 就绪后立即调用，而非仅定义。

以下是优化后的完整 JavaScript 实现（含健壮性增强）：

$(document).ready(function () {     const quotes = [         "Loading sweet video's...",         "Loading... One pixel at a time...",         "Lights, camera, action...",         "Framing imagination, crafting reality..."     ];      // 1. 随机选取一条文案     const randno = quotes[Math.floor(Math.random() * quotes.length)];      // 2. 初始化空容器（确保 DOM 中存在 #element）     $('#element').text(''); // 更安全：使用 .text() 避免 xss 风险      let i = 0;     const speed = 50; // 毫秒/字符，可调快慢      // 3. 打字机主函数     function typeWriter() {         if (i < randno.length) {             // 使用 textContent 或 .text() 替代 innerHTML，防标签注入             $('#element').text(randno.substring(0, i + 1));             i++;             setTimeout(typeWriter, speed);         }     }      // 4. 启动效果     typeWriter(); });

⚠️ 注意事项与最佳实践

• 安全性优先：使用 .text() 而非 .innerHTML 插入内容，防止意外 HTML 标签执行或 XSS 漏洞（即使当前文案为纯文本，也应养成习惯）；
• 性能友好：setTimeout 方案简洁高效，避免 setInterval 可能引发的清理遗漏；如需暂停/重置，可封装为可控制类；
• CSS 协同建议：为 #element 添加 white-space: nowrap; overflow: hidden; 可防止长句换行打断打字节奏；配合 transition: opacity 0.3s 实现淡入更自然；
• 加载完成衔接：您现有的 window.addEventListener("load", ...) 逻辑正确，但建议将 .loader--hidden 的添加时机与打字完成同步（例如在 typeWriter 结束回调中触发隐藏），避免文字未打完就消失。

✅ 总结

该方案摒弃了 Typed.js 等外部库的体积与配置复杂度，以约 20 行精简代码达成高可靠性效果。它精准解决「多文案随机 + 动态逐字渲染」的核心需求，且与您的现有 HTML/CSS 架构无缝集成。只需复制上述脚本，替换 quotes 数组内容，即可快速部署具备品牌温度的加载体验。