User interaction prior to DOMContentLoaded – JavaScript – SitePoint Forums

I recently ran into a bug in a page I’m developing using basic HTML and JavaScript. I’m wondering if there’s a commonly recommended solution.

In response to DOMContentLoaded I’m registering a bunch of event handlers to do things like update text input “disabled” properties when radio buttons are clicked, and to send what the user types to the server via AJAX. So standard stuff – just updating the page and saving changes.

The bug is that on a slow internet connection the user can interact with the page before DOMContentLoaded triggers. Note that this must be true of any page – let’s say the internet connection slows way down just before the </html> tag is parsed – at this moment I don’t think DOMContentLoaded has triggered yet, but the browser can present the DOM to the user for interaction.

At this moment there are no change handlers registered, so changes the user makes aren’t sent to the server, and the “disabled” property isn’t updated, etc.

I’m wondering whether this is a well known problem with a best practice out there to avoid it. I’ve posted this question in a few places but so far haven’t gotten the response I was hoping for – something like “oh sure yeah this is a well known issue and everyone knows you do X to avoid it” :). Currently I’m registering event handlers in response to DOMContentLoaded (since I need the full DOM before I can do that), and it seems like that’s actually not a great approach given this potential bug!

If it’s a common occurrence for you, disable the submit button until the DOMContentLoaded fires, at which time you can enable the submit. Or have a hidden field which only gets loaded with a value when the it fires, and code your form processing to look for the value before accepting the input.