如何让JavaScript文本故障(Glitch)效果在页面加载时触发？

问题原因 #

1. <p>这类普通元素不支持onload事件，该事件仅针对<img>、<script>等需要加载外部资源的元素生效，直接给#load-text绑定onload不会触发。
2. 原代码依赖鼠标悬停事件的event.target获取目标元素，但页面加载事件的事件目标是window，无法直接拿到文本元素，导致逻辑执行失败。

修复方案 #

把Glitch效果的逻辑封装成独立函数，不依赖事件对象，直接传入目标元素；然后在页面加载完成后调用这个函数即可。

修改后的代码 #

JavaScript

const symbols = "ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789";

// 封装成独立函数，接收目标元素作为参数
function triggerGlitch(element) {
    let iterations = 0;
    const interval = setInterval(() => {
        element.innerText = element.innerText.split("")
            .map((letter, index) => {
                if (index < iterations) {
                    return element.dataset.value[index];
                }
                return symbols[Math.floor(Math.random() * 35)];
            })
            .join("");

        if (iterations >= element.dataset.value.length) {
            clearInterval(interval);
            // 此处可添加动画完成后的逻辑，比如淡入页面内容
        }

        iterations += 1 / 6;
    }, 30);
}

// 页面DOM结构加载完成后触发效果
window.addEventListener('DOMContentLoaded', () => {
    const targetElement = document.getElementById("load-text");
    triggerGlitch(targetElement);
});

CSS（无需修改）

body {   
    height: 100vh;
    width: 100vw;
    margin: 0;
    overflow: hidden;
    display: flex;
    background-color: #121012;
    justify-content: center;
}
.loader{
    margin-top: 40vh;
    color: #EEEEEE;
    font-family: monospace;
    font-size: 30pt;
}

HTML（去掉元素上的无效绑定）

<div class="loader">
    <p id="load-text" data-value="LOADER"> LOADER </p>
</div>
<script src="project.js"></script>

补充说明 #

使用DOMContentLoaded事件比window.onload更合适，它会在DOM结构加载完成后立即触发，无需等待图片、样式表等外部资源加载完毕，能更快启动Glitch效果。如果后续需要在动画完成后淡入页面内容，可在clearInterval的位置添加对应的DOM操作或样式修改逻辑。

内容的提问来源于stack exchange，提问作者Tesked