progressive-image.js
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.
-
demonstration
- https://www.npmjs.com/package/progressive-image.js
- https://github.com/craigbuckler/progressive-image.js
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" />
</a>
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.
Add to wishlist