Question

DOMContentLoaded有时可以工作，有时也不会，而setTimeout通常一直有效。

例如，以下代码有效：

setTimeout( ()=>{
    let sites = ['mako.co.il'];
    let regex = /\..+/;
    let href = window.location.href;
    for (let i = 0; i < sites.length; i++) {
        if (href.includes(sites[i])) {
            let domain = sites[i].replace(regex, '');
            document.body.innerHTML =`
                <div style="direction: ltr; position: fixed; top: 0; z-index: 999999; display: block; width: 100%; height: 100%; background: red">
                  <p style="position: relative; top: 40%; display: block; font-size: 66px; font-weight: bold; color: #fff; margin: 0 auto; text-align: center">
                    Enough with this ${domain} bullshit!
                  </p>
                </div>
          `;
        }
    }
}, 1500);

但如果改为setTimeout( ()=>{...}, 1500);，我会使用document.addEventListener('DOMContentLoaded', ()=>{...});它会赢。

为什么？

在这两种情况下，我都会等待一段时间，然后执行代码。在加载所有DOM树之后，代码可能会失败吗？

Answer 1

您的问题可能与某些嵌入式资源（如图像）有时会从浏览器的缓存（快速）加载，而有时从网络加载（缓慢）有关。

document的{{1}}事件在文档可用后触发，但之前加载了图像等嵌入资源。

所以你可能只需要DOMContentLoaded的{{1}}事件：

window

DOMContentLoaded有时会工作，有时候不会，而setTimeout通常始终有效

1 个答案: