手动触发domContentLoaded

Question

I'm stumble with a script that do this:

"complete" === document.readyState ? setTimeout(I, 1) : document.addEventListener ? (document.addEventListener("DOMContentLoaded", X, h), window.addEventListener("load", X, h)) : window.attachEvent ? window.attachEvent("onload", X) : console.log("No available event.")

where X and I are a functions, and h is false.

What does it do?

Answer 1

Maybe you will understand it better this way:

if("complete" === document.readyState){
    setTimeout(I, 1);
}else{
    if(document.addEventListener){
        document.addEventListener("DOMContentLoaded", X, h),
        window.addEventListener("load", X, h));
    }else{
        if(window.attachEvent){
            window.attachEvent("onload", X);
        }else{
            console.log("No available event.");
        }
    }
}

It does:

1. Checks if the document is loaded
2. If it is, function I is called after 1 ms
3. If not, it checks if browser supports addEventListener
4. If it is supported, when the DOM is loaded, function X will be called (through DOMContentLoaded or load events)
5. If it isn't, it checks if browser supports attachEvent
6. If it is supported, when the DOM is loaded, function X will be called (through load event)
7. If it isn't, it says that the browser doesn't support addEventListener nor attachEvent

I guess function X accesses or modifies the DOM, so the script above checks if the DOM is completely loaded before calling X .

Answer 2

That appears to be a chunk of code that detects the loaded state of the DOM in a cross-browser fashion.

If the browser does not support DOMContentLoaded, it falls back to using the window load event.

This is used to initiate your code once the DOM is available to be manipulated, ie after the page has rendered.