#####   ######  #####    ###    #   #  ###  #   #  ######
##  ##  ##      ##  ##  ## ##   #   #   #   #   #  ##
#####   ####    #####   #   #   #   #   #   #   #  ####
##  #   ##      ##      ## ##    # #    #    # #   ##
##   #  ######  ##       ###      #    ###    #    ######

$ curl repovive.com/roadmaps/frontend-system-design-interview-prep/image-carousel-design/lazy-loading-images

░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░████████████████████████████████████████████████████████████████████████████████████████████████████████████

#####   ######  #####    ###    #   #  ###  #   #  ######
##  ##  ##      ##  ##  ## ##   #   #   #   #   #  ##
#####   ####    #####   #   #   #   #   #   #   #  ####
##  #   ##      ##      ## ##    # #    #    # #   ##
##   #  ######  ##       ###      #    ###    #    ######

$ curl repovive.com/roadmaps/frontend-system-design-interview-prep/image-carousel-design/lazy-loading-images

Repovive

Lazy Loading Images - Image Carousel Design | Frontend System Design Interview Prep | Repovive

Repovive.

Frontend System Design Interview Prep17 sections · 206 units12h total

Open in Course

Lazy Loading Images

Loading efficiently

Don't load all images upfront. Load on demand.

Strategy:

Load current slide immediately
Preload adjacent slides ( $1$ before, $1$ after)
Load others as user navigates

Implementation:

const shouldLoad = (index) => {
  return Math.abs(index - currentIndex) <= 1;
};

{images.map((img, i) => (
  shouldLoad(i) ? <img src={img.src} /> : <Placeholder />
))}

Placeholder: Show skeleton or blurred thumbnail while loading.

Preload on hover: Load next image when user hovers over next button.