domloaded

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

Usage no npm install needed!

<script type="module">
  import domloaded from 'https://cdn.skypack.dev/domloaded';
</script>

README

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