desandro/imagesloaded
Imagesloaded
imagesloaded is a JavaScript image loading library used to detect when images and background images have finished loading or failed within a web page. It functions as a frontend asset loader and DOM image event monitor that synchronizes user interface updates with the actual completion of image downloads in the browser.
The library provides monitoring systems to track the loading status of individual images, group containers, and background assets. It coordinates the appearance of a web page to ensure content is not displayed until required assets are ready, which helps manage the loading sequence of visual assets and prevent layout shifts.
Capabilities include triggering callbacks based on total success, failure, or incremental progress. The tool supports a variety of resolution methods, including event listeners, polling for background images, and promises for asynchronous state resolution.
Features
- Image Load Tracking - Detects when images and background images have finished loading or failed within a web page.
- Asset Loaders - Synchronizes user interface updates with the actual completion of image downloads in the browser.
- DOM Event Listeners - Listens for native browser load and error events on image elements to track completion status.
- UI Loading Coordination - Coordinates the appearance of a web page so that content is not displayed until all images are ready.
- Container Load Monitoring - Tracks all images within a specific container and triggers callbacks once all assets have finished loading or failed.
- DOM Image Event Monitoring - Triggers callbacks when specific images or groups of assets complete their loading process.
- Frontend Asset Synchronization - Tracks when images and background assets finish loading to prevent layout shifts and trigger visual updates.
- Image Load Event Monitors - A mechanism to trigger specific events every time a single image finishes loading to provide the status of that individual asset.
- Image Loading Libraries - A JavaScript library for detecting when images and background images have finished loading or failed.
- Event-Driven Callbacks - Provides callbacks that trigger immediately after specific images or entire collections finish loading.
- Dynamic UI Synchronizers - Executes JavaScript functions or animations only after all required images in a container have fully loaded.
- Load State Polling - Checks the completion of CSS background images by polling the complete property of underlying image objects.
- Promise-Based State Resolution - Wraps image event listeners in promises to allow asynchronous awaiting of the final loading state.
- Initial Page Load Optimizations - Manages the loading sequence of visual assets to ensure a smooth user experience during initial page load.
- Asset Loading Counters - Maintains an internal counter of loaded versus total images to determine when the entire set is finished.
