Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/paulsmithkc/domloaded
This micro-library will allow you to easily delay code execution until the DOM is loaded.
https://github.com/paulsmithkc/domloaded
dom front-end jquery micro-library npm-module npm-package
Last synced: about 1 month ago
JSON representation
This micro-library will allow you to easily delay code execution until the DOM is loaded.
- Host: GitHub
- URL: https://github.com/paulsmithkc/domloaded
- Owner: paulsmithkc
- License: mit
- Created: 2020-12-13T14:31:32.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2021-07-28T03:31:40.000Z (over 3 years ago)
- Last Synced: 2024-09-12T23:25:15.087Z (2 months ago)
- Topics: dom, front-end, jquery, micro-library, npm-module, npm-package
- Language: JavaScript
- Homepage:
- Size: 238 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# domloaded
**This micro-library will allow you to easily delay code execution until the DOM is loaded.**
* Unlike the [DOMContentLoaded](https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event) 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()](https://api.jquery.com/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](https://developers.google.com/web/tools/lighthouse) scores.
## Install
Install the package with npm:
```bash
npm install domloaded
```
Or download the built script files from GitHub Releases.
## Basic Usage
```js
domloaded(() => { /* dom is loaded... */ });
```
## Include with Express
1. First install the npm package.
```bash
npm install domloaded
```
2. Then serve the built script files via a static route.
```js
app.use('/js', express.static('node_modules/domloaded/dist'));
```
3. Then link the script in your HTML/view.
```html
```
4. And finally use it in your front-end code.
```js
domloaded(() => { /* dom is loaded... */ });
```
## Include with Webpack/React
1. First install the npm package.
```bash
npm install domloaded
```
2. And then use it where needed:
```js
import domloaded from 'domloaded';
domloaded(() => { /* dom is loaded... */ });
```
## Related
- [MDN: document.readyState property](https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState)
- [MDN: readystatechange event](https://developer.mozilla.org/en-US/docs/Web/API/Document/readystatechange_event)
- [MDN: DOMContentLoaded event](https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event)
- [MDN: load event](https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event)
- [jQuery.ready() Guide](https://learn.jquery.com/using-jquery-core/document-ready/)
- [jQuery.ready() API](https://api.jquery.com/ready/)
- [domready package](https://www.npmjs.com/package/domready)
- [dom-loaded package](https://www.npmjs.com/package/dom-loaded)