Skip to content

Fix DOMContentLoaded event dispatch for delayed JS #166

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.

Sign up for GitHub

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

Jump to bottom
Merged
mustafauysal merged 3 commits into from
Nov 11, 2025
Merged

Fix DOMContentLoaded event dispatch for delayed JS #166

mustafauysal merged 3 commits into from
Nov 11, 2025

Conversation

Copy link
Contributor

Copilot AI commented Nov 11, 2025 •
edited
Loading

Scripts loaded via defer.js with type="pc-delayed-js" that listen for DOMContentLoaded never execute because the event has already fired when the deferred scripts run.

Changes

Modified FileOptimizer.php to dispatch a synthetic DOMContentLoaded event after delayed scripts load:

  • Monitor script[type="pc-delayed-js"] elements via setInterval (50ms)
  • Once all scripts replaced by defer.js, dispatch synthetic event after 10ms buffer
  • Cross-browser compatible event creation (modern + IE9+)
  • Auto-cleanup with clearInterval

Example

Scripts like this now work correctly when delayed:

// Previously: listener never fired when loaded as type="pc-delayed-js"
document.addEventListener('DOMContentLoaded', function() {
  console.log('This now executes!');
  // ... initialization code
});

Implementation

// Count delayed scripts
var pcDelayedScripts=document.querySelectorAll('script[type="pc-delayed-js"]');
var pcScriptCount=pcDelayedScripts.length;

// Monitor until all replaced
var pcCheckInterval=setInterval(function(){
  var remaining=document.querySelectorAll('script[type="pc-delayed-js"]').length;
  if(remaining===0){
    clearInterval(pcCheckInterval);
    // Dispatch synthetic DOMContentLoaded
    var event=document.createEvent?document.createEvent("Event"):new Event("DOMContentLoaded");
    if(document.createEvent){event.initEvent("DOMContentLoaded",true,true);}
    document.dispatchEvent(event);
  }
},50);

Testing

DOMContentLoaded event successfully triggered in delayed script

Verified with both immediate loading and user-interaction-triggered loading modes.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

  • https://api.github.com/repos/Automattic/VIP-Coding-Standards/zipball/b8610e3837f49c5f2fcc4b663b6c0a7c9b3509b6
    • Triggering command: /usr/bin/php8.3 -n -c /tmp/6XDZ65 /usr/bin/composer install (http block)

If you need me to access, download, or install something from one of these locations, you can either:

Original prompt

This section details on the original issue you should resolve

<issue_title>Delayed JS doesn’t trigger DOMContentLoaded event</issue_title>
<issue_description>Steps to Reproduce:

Load foo-bar.js

foo-bar.js contains:

document.addEventListener('DOMContentLoaded', function() {
  console.log('foo bar');
});

Expected Behavior:
console.log('foo bar') should run when the script executes.

Actual Behavior:
Because of how delayed JavaScript works, the DOMContentLoaded event doesn’t fire automatically. As a result, the callback never runs.

Suggested Solution:
Trigger the DOMContentLoaded event manually to ensure the JS code runs properly.</issue_description>

<agent_instructions>We load dist/js/script-loader.js via PHP using https://github.com/shinsenter/defer.js/
to lazy-load JavaScript in a delayed fashion. However, scripts that listen for the DOMContentLoaded event don’t execute because the event has already fired by the time the deferred scripts run. Fix this so that any deferred script relying on DOMContentLoaded still runs properly (e.g., by manually dispatching the event after loading).</agent_instructions>

Comments on the Issue (you are @copilot in this section)

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Copilot AI changed the title [WIP] Fix delayed JS to trigger DOMContentLoaded event Fix DOMContentLoaded event dispatch for delayed JS Nov 11, 2025
Copilot AI requested a review from mustafauysal November 11, 2025 07:33
mustafauysal
mustafauysal approved these changes Nov 11, 2025
View reviewed changes
Copy link
Member

@mustafauysal mustafauysal left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@mustafauysal mustafauysal marked this pull request as ready for review November 11, 2025 07:55
@mustafauysal mustafauysal merged commit 46f62cb into develop Nov 11, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer

@mustafauysal mustafauysal mustafauysal approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

@mustafauysal mustafauysal

Copilot code review Copilot

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Delayed JS doesn’t trigger DOMContentLoaded event

2 participants

@mustafauysal