DOMReady

DOMReady is a lightweight, modern DOM ready utility for JavaScript applications that enables developers to execute code after the DOM has finished loading but before all images and stylesheets are complete. It provides cross-browser compatibility for modern browsers with zero dependencies.

Package Information

• Package Name: domready
• Package Type: npm
• Language: JavaScript
• Installation: npm install domready

Core Imports

For CommonJS (Node.js):

const domready = require("domready");

For AMD (RequireJS):

define(['domready'], function(domready) {
  // Use domready
});

For global usage (browser):

<script src="path/to/domready.js"></script>
<script>
  // domready is available globally
</script>

Note: This package uses UMD (Universal Module Definition) and does not provide native ES module exports. If using with modern bundlers like Webpack or Rollup, they will typically handle the CommonJS import automatically.

Basic Usage

const domready = require("domready");

// Execute code when DOM is ready
domready(function() {
  console.log("DOM is ready!");
  document.getElementById('myElement').style.display = 'block';
});

// Multiple callbacks can be registered
domready(function() {
  // First callback
});

domready(function() {
  // Second callback - will also execute when DOM is ready
});

Capabilities

DOM Ready Detection

Registers callback functions to execute when the DOM has finished loading but before all external resources (images, stylesheets) are complete.

/**
 * Registers a callback function to execute when DOM is ready
 * @param {Function} fn - Callback function to execute when DOM is ready
 * @returns {void}
 */
function domready(fn) {
  // Implementation provided by UMD module
}

Behavior:

• If DOM is already loaded, executes callback immediately via setTimeout(fn, 0)
• If DOM is not loaded, queues callback for execution when DOMContentLoaded event fires
• Multiple callbacks can be registered and will all execute when DOM becomes ready
• Uses native DOMContentLoaded event with automatic cleanup to prevent memory leaks

Browser Compatibility:

• IE9+ (uses DOMContentLoaded event)
• Firefox 4+
• Safari 3+
• Chrome (all versions)
• Opera (all versions)

Usage Examples:

// Basic DOM manipulation
domready(function() {
  const element = document.getElementById('content');
  if (element) {
    element.innerHTML = 'Page loaded!';
  }
});

// Multiple independent callbacks
domready(function() {
  // Initialize navigation
  setupNavigation();
});

domready(function() {
  // Initialize analytics
  trackPageView();
});

// With arrow functions (ES6+)
domready(() => {
  document.body.classList.add('loaded');
});

Ender.js Integration

When used with the Ender.js framework, domready provides additional jQuery-like methods.

Ender.js API

// Direct access to domready function
$.domReady; // Function

/**
 * jQuery-like ready method that returns the Ender chain for chaining
 * @param {Function} f - Callback function to execute when DOM is ready
 * @returns {Object} - Returns 'this' for method chaining
 */
$.ready(f) {
  // Returns this for method chaining
}

Ender.js Usage Examples:

// Using domReady directly
require('domready')(function() {
  $('body').html('<p>DOM ready via require</p>');
});

// Using jQuery-like syntax
$(document).ready(function() {
  $('body').html('<p>DOM ready via $.ready</p>');
});

// Method chaining with ready
$(document)
  .ready(function() {
    // DOM is ready
  })
  .addClass('initialized');

Module Formats

DOMReady supports multiple module systems through Universal Module Definition (UMD):

• CommonJS: module.exports = domready
• AMD: Compatible with RequireJS and other AMD loaders
• Global: Exposes domready as a global variable when no module system is detected

Implementation Notes

• Zero dependencies - completely self-contained
• Minimal footprint - less than 1KB minified
• Uses modern DOM events (DOMContentLoaded) with cross-browser compatibility
• Automatic event listener cleanup to prevent memory leaks
• Lazy callback execution - callbacks queued until DOM is ready, then executed immediately for subsequent calls