demonstration | GitHub | npm | donate | @craigbuckler | craigbuckler.com
progressive-image.js implements a progressively-loaded image effect similar to those seen on Facebook and Medium. A very small blurred image is replaced with the full-resolution equivalent when the element is scrolled into view.
Please use the code as you wish. Tweet me @craigbuckler if you find it useful and consider donating toward development.
Benefits:
- saves unnecessary bandwidth
- fast loading, high performance, images loaded on view
- supports any image type (JPEG photographs are most appropriate)
- supports responsive images (
srcsetandsizesattributes) - supports CSS background images
- supports native lazy loading and aspect ratios
- lightweight: 1,407 bytes of JavaScript, 407 bytes of optional 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
View demonstration and full documentation...
Include the minified CSS and JavaScript anywhere in your page:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/progressive-image.js/dist/progressive-image.css">
<script src="https://cdn.jsdelivr.net/npm/progressive-image.js/dist/progressive-image.js" async></script>or use npm and a bundler:
npm i progressive-image.jsThen add progressively-loaded images:
<a href="full.jpg" class="progressive replace">
<img src="tiny.jpg" class="preview" alt="image" />
</a>where:
full.jpgis the large image.tiny.jpgis a small preview image - typically 20px width.
Both images must have the same aspect ratio.
Refer to demo.html for full documentation, examples, options, and usage notes. It is also available as a CodePen demonstration page.
- fixed page resize removing responsive
srcsetimages
- improved browser support verification
- more resilient to framework issues
- minor refactoring
- updated help and images
- bugfix: script now works in HTML
<head>
pageshowevent for Single Page Apps- more reliable MutationObserver
classnames applied to the preview are applied to the full image (exceptpreview)- smaller, better performance
- no errors in older browsers
- updated usage notes, including native lazy loading
- strict mode
- srcset and sizes attributes only set when available
- README and demo.html update
- retries download after 3s and 6s (suggestion from cheuksing)
- continues to show preview if full image download fails
- autoprefixer update
- Gulp.js minification
- published on npm, CDN information
- added CSS background image support information
- full image replaces preview in-place (PR from ftaiolivista)
- minor refactoring and simplification
- permits any container element
- link to other URLs can be retained
- mutation observer event detects elements added via JavaScript
- minor performance tweaks
- Initial commit