Package Exports

blurry-image-loader
blurry-image-loader/BlurryImageLoader.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (blurry-image-loader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

BlurryImageLoader

GitHub GitHub last commit GitHub issues GitHub pull requests

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>

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

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!