Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/1TSnakers/ProgressiveImageLoader/llms.txt

Use this file to discover all available pages before exploring further.

Progressive Image Loader is a zero-dependency JavaScript library that improves perceived page load performance by displaying low-quality placeholder images immediately, then seamlessly upgrading them to higher-quality versions as they load. Users see something right away — no blank spaces, no layout shifts.

Introduction

Learn how progressive loading works and when to use it

Quickstart

Add progressive image loading to your page in minutes

Configuration

Explore every option: fades, dimensions, cache control

API Reference

Full constructor signature and parameter documentation

​
How it works

1

Prepare image variants

Create a sequence of images ranging from low resolution to full quality. Use the included image_ruiner.py script to generate degraded variants automatically.
2

Include the library

Add progressive-image-loader.js to your HTML page with a <script> tag.
3

Instantiate the loader

Create a new ProgressiveImageLoader({...}) with your container element and image array. The library handles the rest — loading each image in sequence and fading to the next.
Progressive loading increases the total number of HTTP requests (one per image variant). This is an intentional trade-off: users see content faster at the cost of slightly higher bandwidth usage.

Build docs developers (and LLMs) love

Get started for freeTalk to us