Progressive Image Lazy Loader – progressive-image.js

Preview:

Description:

Yet another progressive image lazy loading library to provide a fast and smooth page/image loading experience. Inspired by Facebook and Medium.com.

When activated, the library loads a blurred/low-resolution placeholder image first and then loads the actual image lazily when it is scrolled into view.

Additionally, it allows you to apply any CSS animations to your image, offering a smooth and engaging image reveal effect when the actual image is completely loaded.

How to use it:

1. Download and import the progressive-image.js.

<link rel="stylesheet" href="dist/progressive-image.css" />
<script src="dist/progressive-image.js"></script>

2. Add low-resolution and actual images to the page. That’s it.

<!-- Basic -->
<a href="hi-res.jpg" class="progressive replace">
  <img src="low-res.jpg" class="preview" alt="image"  />
</a>
<!-- With lazy loading attribute -->
<a href="hi-res.jpg" class="progressive replace">
  <img src="low-res.jpg" class="preview" alt="image" loading="lazy"  />
</a>
<!-- With links -->
<a href="https://www.cssscript.com" data-href="hi-res.jpg" class="progressive replace">
  <img src="low-res.jpg" class="preview" alt="image"  />
</a>
<!-- Responsive Image -->
<a href="medium.jpg"
   data-srcset="medium.jpg 800w, hi-res.jpg 1200w"
   data-sizes="100vw"
   class="progressive replace">
  <img src="low-res.jpg" class="preview" alt="image" />
</a>

3. Override the default image reveal effect.

.progressive img.reveal {
  animation: progressiveReveal 1s linear;
}
@keyframes progressiveReveal {
  0% { transform: scale(1.05); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}