Want to take your software engineering career to the next level? Join the mailing list for career tips & advice Click here

DOMContentLoaded

fixing the (in)famous event that does not trigger once "loaded"

Subscribe to updates I use DOMContentLoaded


Statistics on DOMContentLoaded

Number of watchers on Github 25
Number of open issues 0
Average time to close an issue about 1 hour
Main language JavaScript
Average time to merge a PR about 9 hours
Open pull requests 0+
Closed pull requests 0+
Last commit about 6 years ago
Repo Created over 6 years ago
Repo Last Updated over 2 years ago
Size 249 KB
Organization / Authorwebreflection
Contributors2
Page Updated
Do you use DOMContentLoaded? Leave a review!
View DOMContentLoaded activity
View on github
Fresh, new opensource launches 🚀🚀🚀
Software engineers: It's time to get promoted. Starting NOW! Subscribe to my mailing list and I will equip you with tools, tips and actionable advice to grow in your career.
Evaluating DOMContentLoaded for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

DOMContentLoaded

fixing the (in)famous event that does not trigger once loaded.

Please read the post to know more about issues you might have relying this event.

How To

Simply include the inline version of the script on top of any of your HTML pages (few extra bytes, really nothing to worry about) and stop worrying about not being initialized once the DOM Content ... has been Loaded !!!

Can you believe it ?

Content Security Policy

If you are under this restriction, here the deprecated sha1 version of the script: sha1-//cbZaIlYySeh0GGSwpZKzOAkvg=

While if you are targeting modern browsers, here the sha256 version: sha256-XpSHSiwcWV9TTNd43i/nMFtZA8u8gQVfVXEy6Wa68a0=

These digests have been tested without problems via server side headers, as well as meta tag:

<meta
  http-equiv="Content-Security-Policy"
  content="script-src 'unsafe-inline' 'self' 'sha1-//cbZaIlYySeh0GGSwpZKzOAkvg=' 'sha256-XpSHSiwcWV9TTNd43i/nMFtZA8u8gQVfVXEy6Wa68a0='"
>

Bear in mind you must specify 'unsafe-inline' in addition to 'self' for backward compatibility.

Example

Just try to write something like:

document.addEventListener('DOMContentLoaded', function (e) {
  alert([e.type, e.currentTarget === document]);
});

in this page console and you should have your always notified DOMContentLoaded event.

DOMContentLoaded questions on Stackoverflow (View All Questions)
  • Load CSS after "DOMContentLoaded" with ChromeDev Tool
  • DOMContentLoaded and populating getElementsByTagName
  • Async callback running before DOMContentLoaded on Firefox
  • How to detect if DOMContentLoaded was fired
  • Chrome Dev tool not reporting Load time or DomContentLoaded times for Angular application
  • using requestAnimationFrame and DOMContentLoaded for deferring assets
  • How to find out what is causing the delay from DOMContentLoaded to Load
  • Why First Paint is happening before DOMContentLoaded
  • Should I wait for DOMContentLoaded event if I place a script ag at the end of a body tag
  • Async-loaded scripts with DOMContentLoaded or load event handlers not being called?
  • Load function from within DOMcontentLoaded scope
  • DOMContentLoaded never fires, can not use WebComponentsReady
  • Is domContentLoaded event fired before request for images is fired?
  • Element selector returning null even after "DOMContentLoaded"?
  • DomContentLoaded event on image preview pages
  • Why does an ajax request halts other script files from loading before document.ready / DOMContentLoaded event?
  • Difference between DOMContentLoaded and Load events
  • DOMContentLoaded event is not firing
  • DOMContentLoaded blocks page loading
  • Difference between load vs DOMContentLoaded
  • DOMContentLoaded doesn't work
  • Using javascript to serve smaller images with DOMContentLoaded
  • What does the domContentLoaded time means in webpagetest?
  • Detect DOMContentLoaded in iframe
  • DOMContentLoaded very slow in Chrome
  • Why does DOMContentLoaded take so long in IE9?
  • Waiting for DOMContentLoaded in PhantomJS's evaluate()
  • DOMContentLoaded event cannot catch loading of sub frame in Chrome content script
  • Why isn't my function called after DOMContentLoaded?
  • Javascript: Async and jQuery's document ready / DOMContentLoaded
DOMContentLoaded list of languages used
Other projects in JavaScript