imachi 🌖

Tiny image loader.

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