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.

npm install blurry-image-loader

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

<!-- 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>

<!-- Specific version with npm (replace 1.0.1 with

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

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>

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>

Usage

Loading Specific Images

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

var img = document.getElementById('blurImage');
BlurryImageLoader.loadImageWithBlur(img);

Loading All Images

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

BlurryImageLoader.loadAllImagesWithBlur();

Using Selectors:

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

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>

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);

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! 🚀