@awaitbox/document-ready

@awaitbox/document-ready

Await for the document to be ready.

npm i @awaitbox/document-ready --save

The documentReady async function returns a promise that will resolve when the DOMContentLoaded event fires in the future (i.e. when the document becomes "ready", a term that jQuery made popular), or resolves immediately if DOMContentLoaded already happened. Sub-resources (img tags, scripts, audio tags, etc) might not be done loading yet, and in this case you'll want to use window-loaded.

Learn more about the DOMContentLoaded event on MDN.

You can use it in async functions:

import documentReady from '@awaitbox/document-ready'

async function main() {
  await documentReady()
  console.log( 'Ready to begin awesome!' )
}

main()

You can of course use it as a Promise:

import documentReady from '@awaitbox/document-ready'

documentReady()
  .then( data => console.log( 'begin awesome!' ) )

Chain values will pass through if you use it in a Promise chain:

import documentReady from '@awaitbox/document-ready'

fetch( ... )
  .then( ... )
  .then( documentReady ) // passes data through
  .then( data => console.log( 'use data for the awesome!', data ) )

Note

This is written in ES2016 JavaScript. To use this in pre-ES2016 environments, you'll need to run this through a transpiler like Babel (and I recommend using the fast-async plugin to get the best results). See some tips here on wiring it up with Webpack: http://2ality.com/2017/06/pkg-esnext.html.