Medium-style Image Loading Effect – pilpil

Category: Image , Javascript , Loading , Recommended | March 31, 2024
Author:zafree
Views Total:1,319 views
Official Page:Go to website
Last Update:March 31, 2024
License:MIT

Preview:

Medium-style Image Loading Effect – pilpil

Description:

pilpil is a JavaScript library that progressively loads images with a blur effect, as you see on Medium.com.

How to use it:

1. Load Pilpil’s JavaScript and Stylesheet in the html document.

<link rel="stylesheet" href="pilpil.css">
<script type="module" src="pilpil.js"></script>

2. Add low resolution and high resolution images to your webpage following the markup structure as follows:

<div class="image" 
  data-width="3820" 
  data-height="2762" 
  data-small="small.jpg" 
  data-large="large.jpg" 
  data-alt="Image alt">
</div>

3. That’s it. Pilpil will take care of the rest.

Changelog:

v2.0.0 (03/31/2024)

  • Refactor

You Might Be Interested In:


Leave a Reply