Document Promises

Document Promises is a polyfill for document.interactive, document.contentLoaded, and document.loaded which allow you to run code after specific states of the document.

fetch('data.json').then(function (data) {
  document.interactive.then(function () {
    document.querySelectorAll('.username').textContent = data.username;
  });
});

document.interactive

document.interactive is a promise that fulfills when the when the document's readyState becomes interactive.

document.contentLoaded

document.contentLoaded is a promise that fulfills when the DOMContentLoaded event fires on the document.

document.loaded

document.loaded is a promise that fulfills when the when the document's readyState becomes complete.

FAQ

What’s the difference between these promises and DOMContentLoaded?

Using promises for state transitions is much more developer friendly.

What’s the browser support?

Document Promises works all major 2014+ browsers, including Chrome 33+, Edge 12+, Firefox 29+, Opera 20+, Safari 7+, iOS 8+, and Android 4.4.4 & 53+. With Promise and EventListener polyfilled, support goes back to all major 2001+ browsers, including Chrome 1+, Firefox 1+, Internet Explorer 5+, iOS 1+, Netscape Navigator 6+, Opera 7+, Safari 1+, and Android 1+.

What’s the catch?

Document Promises is public domain, dependency free, and 195 bytes when minified and gzipped.

Any known limitations?

If this polyfill runs in a script that uses defer then contentLoaded will resolve before the DOMContentLoaded event.