本文详解如何在网页加载遮罩层中，动态选取随机文案，并通过纯 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 数组内容，即可快速部署具备品牌温度的加载体验。
