Skip to content

A vanilla-js project to demonstrate lazy loading of images using intersection observer and unsplash API for fetching images..

Notifications You must be signed in to change notification settings

sakshamGupta09/lazy-load-images

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Lazy load images using Intersection Observer API

Demo

Project description

This is a vanilla JS project which uses Unsplash API to fetch the most popular images and render the results onto the UI. It supports lazy loading of images using Intersection Observer API. The layout is completely responsive and supports dark theme as well. All images will have a default placeholder image which is very small in size and actual image will be loaded only once it is in viewport.

Key Features

  • Lazy load images using Intersection Observer API.
  • Supports dark and light theme.
  • Automatically displays the page in user's preferred colour scheme (The OS settings).
  • Unsplash API is used for fetching records which supports pagination.
  • Completely responsive and elegant UI.
  • Uses fetch API for network calls.

Screenshots

1). Dark Mode

Screenshot 2022-12-20 at 7 35 05 AM

2). Light Mode

Screenshot 2022-12-20 at 7 35 11 AM

3). Mobile screen

Screenshot 2022-12-20 at 9 18 38 AM

About

A vanilla-js project to demonstrate lazy loading of images using intersection observer and unsplash API for fetching images..

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published