tiny js/css/img loading library
npm install @knighttower/x-loaderx-loader is a lightweight JavaScript library for dynamically loading scripts, CSS, and images. It provides utility methods for handling asset loading and dependency management efficiently.x-loader?- Lightweight: No dependencies, minimal footprint.
- Dynamic Loading: Load assets on demand or based on user interactions.
- Customizable: Configure asset loading sequences and dependencies.
- Declarative Loading: Use
- Improved Performance Handling: Utilizes PerformanceObserver for tracking asset readiness.
- Image Loading: Load images asynchronously with placeholder support.
- Load Types: Supports eager and lazy loading of assets (default is async).
---
``html
`
or install via npm:
`bash`
npm install @knighttower/x-loader
---
for declarative loading.
- Utility methods for checking asset readiness (ready, isLoaded, hasId).
- Uses PerformanceObserver for efficient tracking of first contentful paint.
- Fallback mechanisms using requestAnimationFrame.
- Image placeholders: Define width and height for placeholders before images load.---
Usage
$3
`html
`---
$3
#### Scripts
html
`#### CSS
html
`#### Images with Placeholder
html
x-id="image-group-id"
width="300"
height="200"
>
The and height attributes set a placeholder size before the image loads.---
API Reference
$3
#### xloader.scripts.load(assets, id, loadType, attributes, element)
- Parameters:
- (String|Array): URL(s) of the assets.
- id (String, optional): Unique identifier.
- loadType (String, optional): 'eager' or 'lazy' (default is async).
- attributes (Object, optional): Custom attributes.
- element (HTMLElement, optional): DOM element to append asset.
- Returns: Promise
- Example:
javascript
xloader.scripts.load('https://cdn.example.com/script.js', 'group-id').then(() => {
console.log('Loaded successfully.');
});
`####
- Parameters: (String|Array): ID(s) to check readiness.
- Returns: Promise
- Example:
javascript
xloader.scripts.ready('group-id').then(() => {
console.log('Assets are ready.');
});
`####
- Parameters: (String|Array): ID(s) to check load status.
- Returns: Boolean---
$3
####
- Executes a callback after the DOM and assets are fully loaded.
- Example:
javascript
domTracking.afterLoad(() => {
console.log('DOM fully loaded.');
});
`####
- Executes a callback when the DOM is ready for interaction.
- Example:
javascript
domTracking.isReady(() => {
console.log('DOM is ready.');
});
`---
Attributes for
- : URL(s) of JavaScript files.
- x-css: URL(s) of CSS files.
- x-img: URL(s) of image files.
- x-id: Unique asset identifier.
- x-dep: Dependencies to load before the asset.
- x-loading: Loading type ('eager' or 'lazy', default is async).
- width & height: Define placeholder dimensions before the image loads.---
Example Usage
$3
`html
x-loader Demo
x-id="placeholder_image"
width="600"
height="400"
>
---
Enhancements in v1.2
- Performance Optimizations: ensures first contentful paint tracking.
- Enhanced Fallback Handling: Uses requestAnimationFrame for ensuring proper execution.
- Improved Asset Registration: xloader.scripts.hasId() for checking registered assets.
- Better Debugging Support: Improved logging and timeout handling.
- Image Loading: Images now support width and height for placeholders.
- Default Load Type: Async by default, with support for 'eager' and 'lazy' loading.---
License
x-loader is open-source and available under the MIT License.---
For further details, refer to the source code and inline comments.
`$3
✅ Image Loading: Described how images load asynchronously with placeholders.
✅ Load Types: Clarified that default loading is async, with and 'lazy' options.
✅ Placeholder Dimensions: Highlighted width and height` attributes for images.