BlurryImageLoader

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

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>

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>

or

<!-- Specific version with npm (replace 1.0.1 with the version you need) -->
<script defer async src="https://unpkg.com/blurry-image-loader"></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.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Contribution

Contributions are welcome! Fork the repository, make your changes, and submit a pull request.

Issues and Support

If you encounter any issues or need support, please open an issue.

Credits

This library was created by SH20RAJ.

---

Feel free to give a ⭐️ if this project helped you!

This site is open source. Improve this page.