https://github.com/evavic44/react-lazyload
🦥 A tutorial to illustrate how to lazyload images in a react app using react lazy load image component library
https://github.com/evavic44/react-lazyload
asset-optimization images lazyload lazyload-image react react-lazyload reactjs
Last synced: 5 months ago
JSON representation
🦥 A tutorial to illustrate how to lazyload images in a react app using react lazy load image component library
- Host: GitHub
- URL: https://github.com/evavic44/react-lazyload
- Owner: Evavic44
- License: mit
- Created: 2022-08-06T22:09:31.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-06-06T15:17:16.000Z (over 2 years ago)
- Last Synced: 2025-03-31T12:11:35.278Z (6 months ago)
- Topics: asset-optimization, images, lazyload, lazyload-image, react, react-lazyload, reactjs
- Language: JavaScript
- Homepage: https://react-lazyload.vercel.app
- Size: 314 KB
- Stars: 10
- Watchers: 3
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Lazyload Images
This tutorial is meant to showcase how to lazyload images in a react application using the NPM library: [React Lazy Load Image Component](https://www.npmjs.com/package/react-lazy-load-image-component)
### Default
Default image in react without the lazyload effect
[Source](https://react-lazyload-image.netlify.app/default)
```js
import Image from "../images/bird.jpg";
;
```
### Placeholder
This illustrates the lazyload image component with a placeholder image.
To test this, visit the [/placeholder](https://react-lazyload-image.netlify.app/default) page, set throttling in developer tools to Good 2G, and refresh the page to see the effect.
Adding a placeholder image is very simple, simply add `placeholderSrc=""` attribute with your placeholder image within the quotes to the `LazyLoadImage` component.
```js
import { LazyLoadImage } from "react-lazy-load-image-component";
import Image from "../images/bird.jpg";
import PlaceholderImage from "../images/placeholder.jpg";
;
```
### Blur
This illustrates the lazyload image component with a placeholder image and a blur effeect.
To test this, visit the [/blur](https://react-lazyload-image.netlify.app/default) p
Combining the placeholder image and blur effect provides the best experience for users. To enable it, add the placeholder image and add and effect set to `blur`.
You can add effects like:
- blur: renders a blurred image based on placeholderSrc and transitions to a non-blurred one when the image specified in the src is loaded.
- black-and-white: renders a black and white image based on placeholderSrc and transitions to a colorful image when the image specified in the src is loaded.
- opacity: renders a blank space and transitions to full opacity when the image is loaded.
> Note: They effects rely on CSS and the corresponding CSS file must be imported:
```js
import { LazyLoadImage } from "react-lazy-load-image-component";
import Image from "../images/bird.jpg";
import PlaceholderImage from "../images/placeholder.jpg";
;
```
Tutorial prepared by [Victor Eke](https://github.com/evavic44)
## Resources
- [Demo URL](https://react-lazyload-image.netlify.app/)
- [React Lazy Load Image Component - NPM](https://www.npmjs.com/package/react-lazy-load-image-component)
- [React Lazy Load Image Component - GitHub](https://github.com/Aljullu/react-lazy-load-image-component)