This is the first time that I have attempted to use the ResizeObserver and I'm not sure what I am doing wrong.

The problem that I am seeing is that the ResizeObserver doesn’t CONSISTENTLY execute the function fnSetElementSizingVariables() when the page loads and as such variables that are necessary for the page are not available.

If I move the ResizeObserver outside of the window.addEventListener("DOMContentLoaded", (event), The ResizeObserver doesn't execute when the page is reloaded.

The ResizeObserver as I understand it is supposed to fire initially when the element that it is placed on is initially rendered on the page but the .js file is being referenced at the bottom of the html file so the element has already been rendered and if that's the case why is the fnSetElementSizingVariables() function more often than not executed when the page initially loads. As you can see I'm totally confused...

• Observation will fire when observation starts if Element is being rendered, and Element’s size is not 0,0.

Javascript ResizeObserver is triggered unexpected

The only way that I can assure that the variables are loaded is to create a new window.addEventListener("load") event and call the fnSetElementSizingVariables() function, but that then causes the variables, MORE OFTEN THAN NOT, to be created twice.

Any help with what I am doing wrong would be greatly appreciated. Thanks in advance - CES

const constContentContainer = document.getElementById("idContentContainer");

fnSetElementSizingVariables(){
    // Do Something
)

window.addEventListener("DOMContentLoaded", (event) => {

    window.addEventListener("resize", (event) => {
        fnSetElementSizingVariables();
    });

    const constResizeObject = new ResizeObserver(fnSetElementSizingVariables);
    constResizeObject.observe(constContentContainer);

})

    // If I move the ResizeObserver outside of the window.addEventListener("DOMContentLoaded", (event) => Above
    // The ResizeObserver doesn't exicute 

window.addEventListener("load", (event) => {

    // This was only added because variables we're not always being set by the ResizeObserver.
    fnSetElementSizingVariables();
});

#idContentContainer{

    overflow: auto;
    resize: both;

}

        <main id="idMainContent">

            <article>
                xxxx
            </article>

        </main>