Tiny image loader.
pnpm + Vite(library mode) + biome + Vitest + Playwright + release-please
# yarn
yarn add -D imachi
# npm
npm install -D imachi
# pnpm
pnpm i -D imachiimport { imachi } from "imachi";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 imageprogresscount:number- Current countpercentage: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 imagessrc:string- Image sourceelement: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 sourceelement:HTMLImageElement- Image elementerror:Error- Error object
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "github-actions[bot]")
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent