BlurryImageLoader: A JavaScript Library for Blurry Image Loading Effects ✨
Tags: javascript, blur, image, webdev
Published: 2024-04-01 02:32:46

# 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 https://github.com/SH20RAJ/BlurryImageLoader %}

## 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:

```bash
npm install blurry-image-loader
```

### Using jsDelivr CDN

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

```html
<!-- Latest version -->
<script src="https://cdn.jsdelivr.net/gh/SH20RAJ/BlurryImageLoader@latest/BlurryImageLoader.js"></script>
```
or
```html
<!-- 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`:

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

### Loading All Images

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

```javascript
BlurryImageLoader.loadAllImagesWithBlur();
```

### Using Selectors:

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

### Example HTML

```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:

```javascript
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](https://sh20raj.github.io/BlurryImageLoader/demo.html) to see BlurryImageLoader in action, or play with it on [Codepen](https://codepen.io/SH20RAJ/pen/oNOozqW?editors=1010).

{% codepen https://codepen.io/SH20RAJ/pen/oNOozqW %}


## Contributions and Support

Contributions are welcome! If you encounter any issues or have suggestions, please [open an issue](https://github.com/SH20RAJ/BlurryImageLoader/issues). 

This project is licensed under the MIT License. 

## Credits

This library was created with ❤️ by [SH20RAJ](https://github.com/SH20RAJ). Feel free to give a ⭐️ if this project helped you!

---

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