Progressive Image Lazy Loading Library – with-preview

Category: Javascript , Loading , Recommended | May 8, 2020
Author:WebReflection
Views Total:204 views
Official Page:Go to website
Last Update:May 8, 2020
License:MIT

Preview:

Progressive Image Lazy Loading Library – with-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">

You Might Be Interested In:


Leave a Reply