Tiny image loader.
Installation:
# yarn
yarn add -D imachi
# npm
npm install -D imachi
# pnpm
pnpm i -D imachiImport:
import { imachi } from "imachi";Usage:
const loader = imachi('img');
// progress
loader.progress((event) => {
console.log(`Loading progress: ${event.progress.percentage}%`);
});
// done
loader.done((event) => {
console.log(`All images loaded: ${event.total} images`);
});
// fail
loader.fail((event) => {
console.error(`Failed to load image: ${event.src}`);
});.progress
Called each time an image loads successfully.
const loader = imachi('img');
loader.progress((event) => {
console.log(`Loading progress: ${event.progress.percentage}%`);
});-
imageElement:HTMLImageElement- Loaded image -
progress-
count:number- Current count -
percentage:number- Load completion (%) -
total:number- Total count
-
.done
Called when the entire loader process finishes.
const loader = imachi('img');
loader.done((event) => {
console.log(`All images loaded: ${event.total} images`);
});-
images:[]- Loaded images-
src:string- Image source -
element:HTMLImageElement- Image element
-
-
total:number- Total count
.fail
Called when an image fails to load.
const loader = imachi('img');
loader.fail((event) => {
console.error(`Failed to load image: ${event.src}`);
});-
src:string- Image source -
element:HTMLImageElement- Image element -
error:Error- Error object