Create Smooth Image Loading Transitions With Blurry Image Loader

Category: Javascript , Loading | April 2, 2024
Author:SH20RAJ
Views Total:15 views
Official Page:Go to website
Last Update:April 2, 2024
License:MIT

Preview:

Create Smooth Image Loading Transitions With Blurry Image Loader

Description:

BlurryImageLoader is a lightweight JavaScript library that helps you create a smooth, progressive image-loading experience by adding a subtle blur effect to your images while they load.

By providing a smooth transition from a blurry placeholder to the crisp, final image, it keeps visitors engaged and avoids that jarring jump from blank spaces to full images.

BlurryImageLoader works with both standard src attributes and images that leverage data-src attributes for lazy loading with third-party plugins.

How to use it:

1. Install & download.

# NPM
$ npm install blurry-image-loader

2. Load the Blurry Image Loader library.

<script src="BlurryImageLoader.js"></script>

3. BlurryImageLoader offers various ways to integrate its functionality. You can target specific images using loadImageWithBlur or apply the blur effect to all images on your page with loadAllImagesWithBlur.

<img class="demo" data-src="1.jpg" alt="">
<img class="demo" src="2.jpg" alt="">
// apply BlurryImageLoader to specific images
BlurryImageLoader.loadAllImagesWithBlur('.blurry-image');
// apply BlurryImageLoader to all images
BlurryImageLoader.loadAllImagesWithBlur();

4. You can also use BlurryImageLoader in Node.js environments. Here’s an example:

const BlurryImageLoader = require('./blurry-image-loader');
const images = [
  '/path/to/1.jpg',
  '/path/to/2.jpg',
  '/path/to/3.jpg'
];
BlurryImageLoader.loadAllImagesWithBlur(images);

You Might Be Interested In:


Leave a Reply