Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Appropriate handling of DOMContentLoaded event #216

Closed
arvgta opened this issue Jul 7, 2021 · 3 comments
Closed

Appropriate handling of DOMContentLoaded event #216

arvgta opened this issue Jul 7, 2021 · 3 comments

Comments

@arvgta
Copy link
Owner

arvgta commented Jul 7, 2021

When using Ajaxify, the DOMContentLoaded event is not fired every time around i.e. only on initial load.

Lots of sites that translate e.g. the old jQuery ready() event to native JavaScript use the DOMContentLoaded event instead.
In order to assist such porting, we have introduced the following piece of code...

... which is suspected to be buggy:

$.intevents = () => {
    let iFn = function (a, b, c = false) { 
        if ((this === document || this === window) && a=="DOMContentLoaded") 
            setTimeout(b); // if "DOMContentLoaded" - execute function, 
        else this.ael(a,b,c); //else - call original event listener
    };

    EventTarget.prototype.ael = EventTarget.prototype.addEventListener; // store original method
    EventTarget.prototype.addEventListener = iFn; // start intercepting event listener addition
}

At the very least the setTimeout(b) bit seems dodgy, because the b handler is being called at the time of registering the handler, which can cause timing problems, that have been reported on some sites.

The above logic is enabled by default (intevents: true)

  • Has anyone observed any peculiar behaviour?

A different and possibly cleaner approach might be to programmatically trigger DOMContentLoaded, in case the user wants that?

Something like this:

document.dispatchEvent(new Event('DOMContentLoaded'))
  • What would you think of that?


Now that I made the transition, the next problem is how to avoid duplicate attaching of any event handlers?

If necessary, I would like to ensure that the handlers are only triggered once by using the modern { once: true } technique:

@arvgta arvgta added the question label Jul 7, 2021
@arvgta arvgta closed this as completed Aug 15, 2021
@arvgta
Copy link
Owner Author

arvgta commented Aug 23, 2021

Just for the sake of completeness - this approach has been discarded in the course of some testing...

@arvgta arvgta added wontfix and removed question labels Oct 23, 2021
@arvgta arvgta removed the wontfix label Jul 3, 2022
@arvgta arvgta reopened this Jul 3, 2022
@arvgta
Copy link
Owner Author

arvgta commented Jul 3, 2022

Our partner AllMediaLab has reported, that there are still issues with DOMContentLoaded handling - thus reopening

@arvgta
Copy link
Owner Author

arvgta commented Jul 4, 2022

Our partner AllMediaLab has reported, that this is not an issue with DOMContentLoaded handling after all - thus closing again

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant