lazy-loading-images

A repository that implements various image lazy loading techniques.

Demo

바로가기

Installation and Setup

1. Clone the repository: git clone https://github.com/jinyoung4478/lazy-loading-images.git
2. Install dependencies: yarn
3. Start the development server: yarn dev

Features

• A lazy loading technique using pure React and CSS effects.

How to generate blurry placeholder images easily?

ffmpeg -i imageName.jpg -vf scale=20:-1 imageName-small.jpg

Folder Structure

The project structure is organized as follows:

├── src
│    ├── components
│    ├── App.jsx
│    └── main.jsx
└── public
     └── imgs

Tech Stack

This project utilizes the following technologies:

• React
• styled-components
• gh-pages

References

• Advanced Lazy Loading