DOMContentLoadedが動作することがありますが、時にはsetTimeoutは通常動作しません。

Question

DOMContentLoadedは動作することがあります。

たとえば、次のコードは動作します：

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のDOMContentLoadedイベント火災は使用可能ですが、画像のよう前に埋め込まれたリソースがロードされます。 - あなたは手の込んだことができ

window.addEventListener('load', function() { 
    // This code runs after all resources including images are loaded. 
}, false);