Progressive Image Lazy Loading Library – with-preview

Preview:

Description:

with-preview is a JavaScript for modern image lazy loading effect that progressively blurs and fades in images when they’re scrolled into view.

Inspired by Medium.com and Instagram. The defer loading of the original image is based on the IntersectionObserver API.

How to use it:

1. Import the with-preview library into the HTML document.

<script async src="https://unpkg.com/with-preview/es.js"></script>

2. Prepare a preview version of an image, and then place it in the same directory as the original image.

myImage.jpg
myImage.preview.jpg

3. Just insert the preview image into the document and the library will do the rest.

<img is="with-preview" src="myImage.preview.jpg">