DEV Community

Cover image for Day 46 of #100DaysOfCode: Images Lazy Loading with IntersectionObserver and React Hooks
Jen-Hsuan Hsieh
Jen-Hsuan Hsieh

Posted on • Edited on

1 1

Day 46 of #100DaysOfCode: Images Lazy Loading with IntersectionObserver and React Hooks

Introduction

The website with Image lazy loading loads off-screen images after all critical resources have finished loading to lower Time to Interactive (TTI). The user can avoid wasting money on large data and processing time for decoding the downloaded contents.

The TTI score is a comparison of your page’s TTI and the TTI for real websites, based on data from the HTTP Archive. Developers can measure TTI from Lighthouse

This article introduces the following topics.

  1. What is Lazy Loading?
  2. Implement Images Lazy Loading with IntersectionObserver for React Components

Details

Please refer to my article

Articles

There are some of my articles and released projects. Feel free to check if you like!

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay