0 ratings

progressive-image.js implements an attractive lazy-loading image. A very small, blurred image is replaced with the full-resolution equivalent when the element is scrolled into view.

Basic usage - use a tiny <img> with a link to the full image with the following classes:

<a href="full.jpg" class="progressive replace">
    <img src="tiny.jpg" class="preview" alt="image" />

Benefits include:

  • saves unnecessary bandwidth
  • fast loading, high performance, images loaded on view
  • supports any image type (JPEG photographs are most appropriate)
  • supports responsive images (srcset and sizes attributes)
  • supports CSS background images
  • supports native lazy loading and aspect ratios
  • lightweight: 1,358 bytes of JavaScript, 407 bytes of CSS (minified)
  • any CSS reveal effect can be applied
  • no external dependencies - works with any framework
  • makes up to three attempts if images fail to download
  • works in all modern browsers (IE10+)
  • progressively-enhanced to work in older browsers
  • easy to use

Please donate to support development, receive priority support, and suggest new features.

Copy product URL
$1+ a month


0 ratings