domloaded

This micro-library will allow you to easily delay code execution until the DOM is loaded.

• Unlike the DOMContentLoaded event, this also works when included after the DOM was loaded.

• This function is designed to work in the same was as jQuery's .ready() event. However, it has been broken off as micro-libary to enable usage without importing the entire jQuery library. This enables you to still use it in Vanilla JS and React.js contexts where needed.

• Breaking this off into a micro-library allows you to execute code sooner and can be used to improve your Google Lighthouse scores.

Install

Install the package with npm:

npm install domloaded

Or download the built script files from GitHub Releases.

Basic Usage

domloaded(() => { /* dom is loaded... */ });

Include with Express

1. First install the npm package.

   npm install domloaded

2. Then serve the built script files via a static route.

   app.use('/js', express.static('node_modules/domloaded/dist'));

3. Then link the script in your HTML/view.

   <script src="/js/domloaded.min.js"></script>

4. And finally use it in your front-end code.

   domloaded(() => { /* dom is loaded... */ });

Include with Webpack/React

1. First install the npm package.

   npm install domloaded

2. And then use it where needed:

   import domloaded from 'domloaded';
   
   domloaded(() => { /* dom is loaded... */ });

Related

• MDN: document.readyState property
• MDN: readystatechange event
• MDN: DOMContentLoaded event
• MDN: load event
• jQuery.ready() Guide
• jQuery.ready() API
• domready package
• dom-loaded package