when-dom-ready

$(document).ready() for the 21st century

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
when-dom-ready
336101.2.126 years ago6 years agoMinified + gzip package size for when-dom-ready in KB

Readme

when-dom-ready
$(document).ready() for the 21st century

Build Status Coverage Status npm
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

npm install --save when-dom-ready

or for quick testing:
<script src="https://unpkg.com/when-dom-ready"></script>

Usage

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!'));

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:
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 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))

License

MIT © Luke Childs