DEV Community

Sh Raj
Sh Raj

Posted on • Originally published at github.com

BlurryImageLoader: A JavaScript Library for Blurry Image Loading Effects ✨

#javascript #blur #image #webdev

Introducing BlurryImageLoader: A JavaScript Library for Beautiful Image Loading Effects ✨

Hey developers! Today, I'm excited to introduce you to BlurryImageLoader - a lightweight JavaScript library that simplifies the process of loading images with a blur effect. This library provides a smooth transition from blurred placeholders to clear images, enhancing the user experience of your web projects.

GitHub logo SH20RAJ / BlurryImageLoader

A JavaScript library for loading images with a blur effect.

BlurryImageLoader

Visitors GitHub GitHub last commit GitHub issues GitHub pull requests GitHub stars npm version

A JavaScript library for loading images with a blur effect.

Demo | Codepen

Description

BlurryImageLoader is a lightweight JavaScript library that simplifies the process of loading images with a blur effect, providing a smooth transition from blurred placeholders to clear images.

Features

  • Automatically applies a blur effect to images while they are loading.
  • Supports images with data-src attributes (for lazy loading) or regular src attributes.
  • Provides a clean API for easy integration into projects.

Installation

Via npm

You can install BlurryImageLoader using npm:

npm install blurry-image-loader
Enter fullscreen mode Exit fullscreen mode

Using jsDelivr CDN

You can also include BlurryImageLoader in your HTML directly from the jsDelivr CDN:

<!-- Latest version -->
<script src="https://cdn.jsdelivr.net/gh/SH20RAJ/BlurryImageLoader@latest/BlurryImageLoader.js"></script>
Enter fullscreen mode Exit fullscreen mode

or

<!-- Specific version with npm (replace 1.0.1 with the version you need) -->
<script src="https://cdn.jsdelivr.net/npm/blurry-image-loader@1.0.1"></script>
Enter fullscreen mode Exit fullscreen mode

or

<!-- Specific version with npm (replace 1.0.1 with
…
Enter fullscreen mode Exit fullscreen mode
View on GitHub

Why BlurryImageLoader?

Loading images can sometimes lead to a jarring experience for users, especially when images take a moment to load. With BlurryImageLoader, you can create a more visually appealing loading experience by applying a blur effect to images while they are loading, gradually revealing the clear image once it's ready.

Features

  • Automatic Blur Effect: BlurryImageLoader automatically applies a blur effect to images as they load.
  • Flexible Attributes: Supports images with both data-src attributes for lazy loading and regular src attributes.
  • Simple Integration: Provides a clean API for easy integration into your projects.

Installation

Via npm

You can install BlurryImageLoader using npm:

npm install blurry-image-loader
Enter fullscreen mode Exit fullscreen mode

Using jsDelivr CDN

Alternatively, you can include BlurryImageLoader in your HTML directly from the jsDelivr CDN:

<!-- Latest version -->
<script src="https://cdn.jsdelivr.net/gh/SH20RAJ/BlurryImageLoader@latest/BlurryImageLoader.js"></script>
Enter fullscreen mode Exit fullscreen mode

or

<!-- Specific version with npm (replace x.y.z with the version you need) -->
<script src="https://cdn.jsdelivr.net/npm/blurry-image-loader@x.y.z/BlurryImageLoader.js"></script>
Enter fullscreen mode Exit fullscreen mode

Usage

Loading Specific Images

To load specific images with a blur effect, use loadImageWithBlur:

var img = document.getElementById('blurImage');
BlurryImageLoader.loadImageWithBlur(img);
Enter fullscreen mode Exit fullscreen mode

Loading All Images

To load all images on a page with a blur effect, use loadAllImagesWithBlur:

BlurryImageLoader.loadAllImagesWithBlur();
Enter fullscreen mode Exit fullscreen mode

Using Selectors: 

// Load all images with class .blurry-image
BlurryImageLoader.loadAllImagesWithBlur('.blurry-image');
Enter fullscreen mode Exit fullscreen mode

Example HTML 

<div class="image-container">
    <!-- Example with data-src attribute -->
    <img class="blurry-image" data-src="path/to/image.jpg" alt="Image">
</div>

<div class="image-container">
    <!-- Example with regular src attribute -->
    <img class="blurry-image" src="path/to/image.jpg" alt="Image">
</div>
Enter fullscreen mode Exit fullscreen mode

Usage in Node.js

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

const BlurryImageLoader = require('./blurry-image-loader');

// Example usage in Node.js
const images = [
    'path/to/image1.jpg',
    'path/to/image2.jpg',
    'path/to/image3.jpg'
];

BlurryImageLoader.loadAllImagesWithBlur(images);
Enter fullscreen mode Exit fullscreen mode

You can use the cdn in Node.js or NextJS accordingly.

Give it a Try!

Check out the demo to see BlurryImageLoader in action, or play with it on Codepen.

Contributions and Support

Contributions are welcome! If you encounter any issues or have suggestions, please open an issue.

This project is licensed under the MIT License.

Credits

This library was created with ❤️ by SH20RAJ. Feel free to give a ⭐️ if this project helped you!

Give your users a visually appealing loading experience with BlurryImageLoader. Happy coding! 🚀

Top comments (0)