https://github.com/lukechilds/when-dom-ready
$(document).ready() for the 21st century
https://github.com/lukechilds/when-dom-ready
domready promise
Last synced: 2 months ago
JSON representation
$(document).ready() for the 21st century
- Host: GitHub
- URL: https://github.com/lukechilds/when-dom-ready
- Owner: lukechilds
- License: mit
- Created: 2017-01-16T08:44:58.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-22T12:22:24.000Z (over 2 years ago)
- Last Synced: 2025-04-04T00:10:17.262Z (2 months ago)
- Topics: domready, promise
- Language: JavaScript
- Homepage:
- Size: 103 KB
- Stars: 331
- Watchers: 10
- Forks: 8
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# when-dom-ready
> $(document).ready() for the 21st century
[](https://travis-ci.org/lukechilds/when-dom-ready)
[](https://coveralls.io/github/lukechilds/when-dom-ready?branch=master)
[](https://www.npmjs.com/package/when-dom-ready)
[](https://github.com/sponsors/lukechilds)
[](https://lu.ke/tip/bitcoin)
[](https://lu.ke/tip/lightning)
Returns a Promise for cleaner usage, provides a Promise chain helper function and can also be used as a pure function. The Promise will resolve instantly if the DOM is already ready.
## Browser Compatibility
- IE9+ (requires Promise polyfill)
- Edge *
- Firefox 29+
- Safari 8+
- Chrome 33+
- Opera 23+
## Install
```shell
npm install --save when-dom-ready
```
or for quick testing:
```html
```
## Usage
```js
import whenDomReady from 'when-dom-ready';
whenDomReady().then(() => console.log('DOM is ready yo!'));
```
You can still use callbacks if you want to:
```js
whenDomReady(() => console.log('DOM is ready yo!'));
```
## Promise chain helper
There is also a little helper function, `whenDomReady.resume()`, that pauses the execution of a Promise chain and then resumes it with the last value once the DOM is ready.
This allows you to specify complex async control flow in simple readable code:
```js
fetch('/my-badass-api.json')
.then(getSomeProcessingDoneWhileWaitingForDom)
.then(whenDomReady.resume())
.then(injectDataIntoDom);
```
## Pure usage
You can make the function pure by passing in a `document` object. This is really [useful for tests](https://github.com/lukechilds/when-dom-ready/blob/master/test/unit.js) and mocking environments.
For example this works in Node.js:
```js
const Window = require('window');
const whenDomReady = require('when-dom-ready');
const { document } = new Window();
whenDomReady(document).then(() => console.log('DOM is ready yo!'));
```
Again, you can use the callback version as a pure function too:
```js
whenDomReady(() => console.log('DOM is ready yo!'), document);
```
And of course the helper:
```js
//...
.then(whenDomReady.resume(document))
```
## License
MIT © Luke Childs