Skip to content

Delaying onDOMContentLoaded and onload events

While testing frontend issues, you may be confronted with verifying a feature's functionality while the document is still in parsing mode. That is before the DOMContentLoaded event was triggered. Or maybe the test needs to be run in between DOMContentLoaded an load events. Or some other weird stuff. Here's how…

There is no “native” - inline - way to influence (delay) either of DOMContentLoaded or load. All is not lost, though. A browser keeps a document in parsing mode until all synchronous JavaScript has finished loading (and executing). So we can simply load a <script> resource from a web server that allows us to specify how long it should delay the return of that resource. Delaying the load event can be done similarly, by loading an image instead of a script.


I've written a little PHP script (test-resource.php) that allows you to

  • specify how long the request's response should be delayed (in milliseconds)
  • specify HTTP response status code an message (like 404 Not Found)
  • specify the returned data (using proper Content-Type, using valid content)
    • HTML
    • CSS
    • JavaScript
    • JSON
    • GIF image
    • SVG image

The test-resource does a bit more than needed for only delaying some events. It allows you to test what your implementation does with JavaScript that is not served as application/javascript, or what a non-image/svg+xml looks like, or if you're properly accepting encodings other than UTF-8. Is a JavaScript resource executed if it's returned as 404 Not Found? … have fun answering those questions yourself ☺


Remy Sharp created hang - a public service doing most of the above. It's a node server you can grab from here.

Comments

Display comments as Linear | Threaded

No comments

The author does not allow comments to this entry