https://github.com/sh20raj/blurryimageloader
A JavaScript library for loading images with a blur effect.
https://github.com/sh20raj/blurryimageloader
image-loading-library javascript
Last synced: about 1 month ago
JSON representation
A JavaScript library for loading images with a blur effect.
- Host: GitHub
- URL: https://github.com/sh20raj/blurryimageloader
- Owner: SH20RAJ
- License: mit
- Created: 2024-04-01T01:48:27.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-04-01T02:53:16.000Z (about 1 year ago)
- Last Synced: 2024-11-09T14:43:08.864Z (7 months ago)
- Topics: image-loading-library, javascript
- Language: HTML
- Homepage: https://sh20raj.github.io/BlurryImageLoader/
- Size: 25.4 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# BlurryImageLoader
[](https://visitorbadge.io/status?path=https%3A%2F%2Fgithub.com%2FSH20RAJ%2FBlurryImageLoader%2F)
[](https://www.jsdelivr.com/package/gh/sh20raj/BlurryImageLoader)
[](https://npmjs.com/blurry-image-loader)
A JavaScript library for loading images with a blur effect.
[Demo](https://sh20raj.github.io/BlurryImageLoader/demo.html) | [Codepen](https://codepen.io/SH20RAJ/pen/oNOozqW?editors=1010)
## 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:
```bash
npm install blurry-image-loader
```
### Using jsDelivr CDN
You can also include `BlurryImageLoader` in your HTML directly from the jsDelivr CDN:
```html
```
or
```html
```
or
```html
```
## 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
![Image]()
```
## 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.
## License
This project is licensed under the MIT License - see the [LICENSE](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](https://github.com/SH20RAJ/BlurryImageLoader/issues).
## Credits
This library was created by [SH20RAJ](https://github.com/SH20RAJ).
---
Feel free to give a ⭐️ if this project helped you!