├── public ├── _redirects └── vite.svg ├── vercel.json ├── src ├── images │ ├── bird.jpg │ └── placeholder.jpg ├── main.jsx ├── App.jsx ├── pages │ ├── Default.jsx │ ├── Placeholder.jsx │ ├── Blur.jsx │ └── Home.jsx └── App.css ├── vite.config.js ├── .gitignore ├── index.html ├── package.json ├── LICENSE └── README.md /public/_redirects: -------------------------------------------------------------------------------- 1 | /* /index.html 200 -------------------------------------------------------------------------------- /vercel.json: -------------------------------------------------------------------------------- 1 | { 2 | "rewrites": [{ "source": "/(.*)", "destination": "/" }] 3 | } 4 | -------------------------------------------------------------------------------- /src/images/bird.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Evavic44/react-lazyload/HEAD/src/images/bird.jpg -------------------------------------------------------------------------------- /src/images/placeholder.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Evavic44/react-lazyload/HEAD/src/images/placeholder.jpg -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()] 7 | }) 8 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import { BrowserRouter } from "react-router-dom"; 4 | import App from "./App"; 5 | 6 | const root = ReactDOM.createRoot(document.getElementById("root")); 7 | root.render( 8 | 9 | 10 | 11 | 12 | 13 | ); 14 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | React LazySizes Example 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-lazyload", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "react": "^18.2.0", 13 | "react-dom": "^18.2.0", 14 | "react-lazy-load-image-component": "^1.5.5", 15 | "react-router-dom": "^6.3.0" 16 | }, 17 | "devDependencies": { 18 | "@types/react": "^18.0.15", 19 | "@types/react-dom": "^18.0.6", 20 | "@vitejs/plugin-react": "^2.0.0", 21 | "vite": "^3.0.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import { Routes, Route } from "react-router-dom"; 2 | import Home from "./pages/Home.jsx"; 3 | import Blur from "./pages/Blur.jsx"; 4 | import Default from "./pages/Default.jsx"; 5 | import Placeholder from "./pages/Placeholder.jsx"; 6 | import "./App.css"; 7 | 8 | function App() { 9 | return ( 10 | 11 | } /> 12 | } /> 13 | } /> 14 | } /> 15 | 16 | ); 17 | } 18 | 19 | export default App; 20 | -------------------------------------------------------------------------------- /src/pages/Default.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link } from "react-router-dom"; 3 | import Image from "../images/bird.jpg"; 4 | import { LazyLoadImage } from "react-lazy-load-image-component"; 5 | 6 | export default function Default() { 7 | return ( 8 |
9 |
10 |

Default

11 |

Lazyload by default, without any effects

12 | Go back 13 |
14 | 15 |
16 | 23 |
24 |
25 | ); 26 | } 27 | -------------------------------------------------------------------------------- /src/pages/Placeholder.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link } from "react-router-dom"; 3 | import { LazyLoadImage } from "react-lazy-load-image-component"; 4 | import Image from "../images/bird.jpg"; 5 | import PlaceholderImage from "../images/placeholder.jpg"; 6 | 7 | export default function Placeholder() { 8 | return ( 9 |
10 |
11 |

Placeholder

12 |

Lazyload effect with a placeholder image

13 |

14 | To see the effects, disable cache and set throttling to 3G and refresh 15 | the page. 16 |

17 | Go back 18 |
19 |
20 | 27 |
28 |
29 | ); 30 | } 31 | -------------------------------------------------------------------------------- /src/pages/Blur.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link } from "react-router-dom"; 3 | import { LazyLoadImage } from "react-lazy-load-image-component"; 4 | import Image from "../images/bird.jpg"; 5 | import PlaceholderImage from "../images/placeholder.jpg"; 6 | 7 | export default function Blur() { 8 | return ( 9 |
10 |
11 |

Blur

12 |

Lazyload effect with a placeholder image and blur effect

13 |

14 | To see the effects, disable cache and set throttling to 3G and refresh 15 | the page. 16 |

17 | Go back 18 |
19 | 20 |
21 | 29 |
30 |
31 | ); 32 | } 33 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | *, 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; 7 | } 8 | 9 | a { 10 | color: rgb(14, 167, 52); 11 | } 12 | 13 | .container { 14 | margin: 3rem auto; 15 | max-width: 900px; 16 | text-align: center; 17 | padding: 1rem; 18 | } 19 | 20 | header { 21 | text-align: center; 22 | } 23 | 24 | header h1 { 25 | font-size: 3rem; 26 | line-height: 1.2; 27 | letter-spacing: -1px; 28 | } 29 | 30 | header p { 31 | margin: 1rem auto; 32 | max-width: 600px; 33 | } 34 | 35 | /* Home */ 36 | section { 37 | display: grid; 38 | grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 39 | gap: 1rem; 40 | grid-auto-rows: 150px; 41 | margin-top: 3rem; 42 | padding: 1rem; 43 | } 44 | 45 | .link { 46 | display: flex; 47 | align-items: center; 48 | justify-content: center; 49 | text-align: center; 50 | border: 1px solid #ddd; 51 | text-decoration: none; 52 | color: inherit; 53 | } 54 | 55 | .card { 56 | margin-top: 100vh; 57 | } 58 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Victor Eke 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/pages/Home.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | function Home() { 4 | return ( 5 |
6 |
7 |

React Lazysizes Example

8 |

9 | Tutorial to illustrate image optimization in a react app using the NPM 10 | library:{" "} 11 | 15 | Lazy load Image Component 16 | {" "} 17 | ↗ 18 |

19 |
20 | 21 |
22 | 23 | Default 24 | 25 | 26 | Placeholder 27 | 28 | 29 | Blur 30 | 31 |
32 | 33 |

34 | Prepared by{" "} 35 | 36 | Victor Eke 37 | 38 | ↗ 39 |

40 |
41 | ); 42 | } 43 | 44 | export default Home; 45 | -------------------------------------------------------------------------------- /public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Lazyload Images 2 | 3 | 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) 4 | 5 | ### Default 6 | 7 | Default image in react without the lazyload effect 8 | [Source](https://react-lazyload-image.netlify.app/default) 9 | 10 | ```js 11 | import Image from "../images/bird.jpg"; 12 | Fishy; 13 | ``` 14 | 15 | ### Placeholder 16 | 17 | This illustrates the lazyload image component with a placeholder image. 18 | 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. 19 | 20 | Adding a placeholder image is very simple, simply add `placeholderSrc=""` attribute with your placeholder image within the quotes to the `LazyLoadImage` component. 21 | 22 | ```js 23 | import { LazyLoadImage } from "react-lazy-load-image-component"; 24 | import Image from "../images/bird.jpg"; 25 | import PlaceholderImage from "../images/placeholder.jpg"; 26 | 27 | ; 34 | ``` 35 | 36 | ### Blur 37 | 38 | This illustrates the lazyload image component with a placeholder image and a blur effeect. 39 | To test this, visit the [/blur](https://react-lazyload-image.netlify.app/default) p 40 | 41 | 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`. 42 | 43 | You can add effects like: 44 | 45 | - blur: renders a blurred image based on placeholderSrc and transitions to a non-blurred one when the image specified in the src is loaded. 46 | - 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. 47 | - opacity: renders a blank space and transitions to full opacity when the image is loaded. 48 | 49 | > Note: They effects rely on CSS and the corresponding CSS file must be imported: 50 | 51 | ```js 52 | import { LazyLoadImage } from "react-lazy-load-image-component"; 53 | import Image from "../images/bird.jpg"; 54 | import PlaceholderImage from "../images/placeholder.jpg"; 55 | 56 | ; 64 | ``` 65 | 66 | Tutorial prepared by [Victor Eke](https://github.com/evavic44) 67 | 68 | ## Resources 69 | 70 | - [Demo URL](https://react-lazyload-image.netlify.app/) 71 | - [React Lazy Load Image Component - NPM](https://www.npmjs.com/package/react-lazy-load-image-component) 72 | - [React Lazy Load Image Component - GitHub](https://github.com/Aljullu/react-lazy-load-image-component) 73 | --------------------------------------------------------------------------------