DOMContentLoaded sometimes work and sometimes doesn't while setTimeout usually always work

Question

DOMContentLoaded sometimes work and sometimes doesn't while setTimeout usually always work.

For example, the following code works:

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);

But if instead setTimeout( ()=>{...}, 1500); I would use document.addEventListener('DOMContentLoaded', ()=>{...}); it won't.

Why is that?

In both cases I wait a certain time period and then execute the code. What could be the case that after all DOM tree loaded, the code fails?

"sometimes does and sometimes doesnt work" - can you elaborate? Give us some more specific scenario's as to when what does and does not work. For instance: "The DOMContentLoaded event only works on initial page load and not on consecutive navigation within the website". This helps us narrow down the issue. — SidOfc, Nov 25 '17 at 22:43
Possible duplicate of [Code inside DOMContentLoaded event not working](https://stackoverflow.com/questions/39993676/code-inside-domcontentloaded-event-not-working) | Also this comment: https://stackoverflow.com/questions/39993676/code-inside-domcontentloaded-event-not-working#comment67265322_39993676 — yuriy636, Nov 25 '17 at 22:49
Sadly I really think I can't, in this case, @SidOfc because if I remember correctly about 2 months ago it worked, and now it didn't. I wish I had more details than that, on this... :| I might recall wrongly, and `DOMContentLoaded` didn't work at all. — Osi, Nov 25 '17 at 23:03

Marat Tanalin · Accepted Answer · 2017-11-27T01:35:35.140

1

Your issue is probably related to that some embedded resources like images are sometimes loaded from browser’s cache (fast) while sometimes loaded from the web (slowly).

The document’s DOMContentLoaded event fires after the document is available, but before embedded resources like images are loaded.

So you probably just need the window’s load event instead:

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

edited Nov 27 '17 at 01:35

answered Nov 26 '17 at 02:19

Marat Tanalin

13,927
1
36
52

You mean `window.addEventListener('DOMContentLoaded', ()=>{...});` instead `document` on start? Sadly, it didn't work. Or maybe I didn't understand correct. – Osi Nov 26 '17 at 12:20
Oh sorry, okay, I should read on the difference between `DOMContentLoaded` and `load` events. – Osi Nov 26 '17 at 13:39
Thank you Marat. It worked. Just a small note: I wrote `true` in the end (while you wrote `false`) and it worked as well. Is there a particular reason you wrote `false`? Thanks again! – Osi Nov 27 '17 at 19:44
`false` is the default value of the third parameter that was not always optional and may still be needed in some older browsers. The purpose of the parameter itself is described on [MDN](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener). – Marat Tanalin Nov 28 '17 at 00:26

DOMContentLoaded sometimes work and sometimes doesn't while setTimeout usually always work

1 Answers1