$(document).ready() for the 21st century
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.
- IE9+ (requires Promise polyfill)
- Edge *
- Firefox 29+
- Safari 8+
- Chrome 33+
- Opera 23+
npm install --save when-dom-readyor for quick testing:
<script src="https://unpkg.com/when-dom-ready"></script>import whenDomReady from 'when-dom-ready';
whenDomReady().then(() => console.log('DOM is ready yo!'));You can still use callbacks if you want to:
whenDomReady(() => console.log('DOM is ready yo!'));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:
fetch('/my-badass-api.json')
.then(getSomeProcessingDoneWhileWaitingForDom)
.then(whenDomReady.resume())
.then(injectDataIntoDom);You can make the function pure by passing in a document object. This is really useful for tests and mocking environments.
For example this works in Node.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:
whenDomReady(() => console.log('DOM is ready yo!'), document);And of course the helper:
//...
.then(whenDomReady.resume(document))MIT © Luke Childs
![greenkeeper[bot] avatar](https://avatars.githubusercontent.com/in/505?v=4 "greenkeeper[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent