$(document).ready() for the 21st century
JavaScript
Switch branches/tags
Clone or download
Permalink
Failed to load latest commit information.
src Stop XO complaining about void Mar 7, 2017
test Refactor tests Aug 31, 2017
.gitignore Transpile with babel for IE and Safari Jan 24, 2017
.npmignore
.travis.yml Integrate AVA with Travis and Coveralls Jan 16, 2017
LICENSE Extract domLoaded from Onionite Jan 16, 2017
README.md Remove Greenkeeper badge Aug 31, 2017
package.json Update ava to the latest version πŸš€ (#28) Feb 6, 2018
rollup.config.js Keep XO happy Feb 7, 2017

README.md

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