Skip to content

yitengjun/imachi

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

15 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

imachi ๐ŸŒ–

Tiny image loader.

pnpm + Vite(library mode) + biome + Vitest + Playwright + release-please

Installation:

# yarn
yarn add -D imachi
# npm
npm install -D imachi
# pnpm
pnpm i -D imachi

Import:

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}`);
});

Events

.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