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.
BlurryImageLoader
A JavaScript library for loading images with a blur effect.
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:
Using jsDelivr CDN
You can also include BlurryImageLoader in your HTML directly from the jsDelivr CDN:
<script src=”https://cdn.jsdelivr.net/gh/SH20RAJ/BlurryImageLoader@latest/BlurryImageLoader.js“></script>
or
<script src=”https://cdn.jsdelivr.net/npm/blurry-image-loader@1.0.1“></script>
or
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:
Using jsDelivr CDN
Alternatively, you can include BlurryImageLoader in your HTML directly from the jsDelivr CDN:
<script src=“https://cdn.jsdelivr.net/gh/SH20RAJ/BlurryImageLoader@latest/BlurryImageLoader.js”></script>
or
<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:
BlurryImageLoader.loadImageWithBlur(img);
Loading All Images
To load all images on a page with a blur effect, use loadAllImagesWithBlur:
Using Selectors:
BlurryImageLoader.loadAllImagesWithBlur(‘.blurry-image‘);
Example HTML
<!– 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:
// 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! 🚀
