load event doesn’t fire in iframe when code is broken up with setTimeout

I have a number of functions in a task list that need to initialise at certain points i.e. immediate (in an IIFE), domContentLoaded, and load.

This creates lots of long running tasks on the main thread, which block the UI.

I’m trying to break those up, so when each “task” is executed, I wrap it in a setTimeout(task, 0).

This works perfectly, each function runs in its own task and UI is considerably more responsive when loading.

However, if I load a page in an iframe, any of those (immediate) functions which need a window.load event i.e. to hide a loader, don’t fire.

This is how the queue is processed:

    function _initialisers(obj) {
        for (const [key, func] of Object.entries(obj)) {
            setTimeout(func, 0);
        }
    };

    _initialisers(initialisersImmediate);

    window.addEventListener("DOMContentLoaded", function domContentLoaded() {
        _initialisers(initialisersDOMContentLoaded);
    });

    window.addEventListener("load", function pageLoad() {
        _initialisers(initialisersPageLoad);
    });

This is an example of how one of the items is added to the task queue:

 _framework.init(NAME, INIT.IMMEDIATE, function () {
     let loader = document.getElementById(ID_LOADER);

     if (loader.classList.contains(CSS_SHOW_BY_DEFAULT)) {
         window.addEventListener("load", hide); // Fires in main window but not iframe
     }
 });

The INIT.IMMEDIATE specifies how it should execute. Only immediate functions are allowed to define events such as load.

If I remove the timeout, everything works fine.

I wondered if someone could shed some light on why this might be happening?