https://github.com/awaitbox/document-ready

Await for the `document` to be ready.
https://github.com/awaitbox/document-ready

Last synced: 9 days ago
JSON representation

Await for the `document` to be ready.

• Host: GitHub
• URL: https://github.com/awaitbox/document-ready
• Owner: awaitbox
• Created: 2018-01-05T21:40:24.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-04-18T00:57:48.000Z (over 6 years ago)
• Last Synced: 2024-10-05T12:45:14.405Z (about 1 month ago)
• Language: JavaScript
• Size: 18.6 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        

@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](https://github.com/awaitbox/window-loaded).

Learn more about the `DOMContentLoaded` event [on

MDN](https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded).

You can use it in async functions:

```js

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:

```js

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:

```js

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](http://babeljs.io)

(and I recommend using the

[fast-async](https://github.com/MatAtBread/fast-async) plugin to get the best

results). See some tips here on wiring it up with

[Webpack](https://webpack.js.org): http://2ality.com/2017/06/pkg-esnext.html.