# twobin/react-lazyload

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/twobin-react-lazyload).**

5,904 stars · 486 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/twobin/react-lazyload
- awesome-repositories: https://awesome-repositories.com/repository/twobin-react-lazyload.md

## Topics

`lazyload` `react`

## Description

react-lazyload is a React component and viewport visibility wrapper designed to minimize resource consumption by deferring the display of off-screen UI elements. It functions as a frontend performance optimizer that delays the rendering of images or components until they enter the browser viewport.

The library prevents layout shifts by allowing the definition of placeholder dimensions, maintaining page stability while content loads lazily. It manages the transition from these placeholders to actual content using internal state and optional animations.

The system provides mechanisms for viewport visibility detection, manual display overrides to force immediate mounting, and manual visibility triggers for cases where standard scroll or resize events are insufficient.

## Tags

### Web Development

- [Frontend Performance Optimization](https://awesome-repositories.com/f/web-development/frontend-performance-optimization.md) — Optimizes frontend performance by delaying the rendering of off-screen components and images.
- [Lazy Content Mounting](https://awesome-repositories.com/f/web-development/dom-component-mounting/lazy-content-mounting.md) — Defers the rendering of React components until they are triggered to become visible.
- [Intersection Observer Implementations](https://awesome-repositories.com/f/web-development/intersection-observer-implementations.md) — Uses the Intersection Observer API to detect when elements enter the viewport and trigger rendering.
- [Deferred Loading](https://awesome-repositories.com/f/web-development/performance-optimizations/initial-page-load-optimizations/deferred-loading.md) — Delays the loading and rendering of components or images until they enter the viewport. ([source](https://twobin.github.io/react-lazyload/examples/))
- [Dimension Specification](https://awesome-repositories.com/f/web-development/lazy-loading-libraries/image-lazy-loading/placeholder-first-loading/dimension-specification.md) — Allows specifying element dimensions before they become visible to prevent layout shifts. ([source](https://github.com/twobin/react-lazyload/wiki/Upgrade-Guide))

### Programming Languages & Runtimes

- [Component Lazy Loadings](https://awesome-repositories.com/f/programming-languages-runtimes/dynamic-class-creation/class-loading-mechanisms/lazy-loading/component-lazy-loadings.md) — Implements deferred loading for React elements to reduce initial resource consumption.

### User Interface & Experience

- [Item Visibility Detection](https://awesome-repositories.com/f/user-interface-experience/item-visibility-detection.md) — Triggers component rendering only after the element becomes visible within the viewport or overflow container. ([source](https://github.com/twobin/react-lazyload/wiki/Upgrade-Guide))
- [Viewport Visibility Observers](https://awesome-repositories.com/f/user-interface-experience/viewport-visibility-observers.md) — Tracks when elements enter the viewport to trigger the loading of deferred content.
- [Cumulative Layout Shift Prevention](https://awesome-repositories.com/f/user-interface-experience/cumulative-layout-shift-prevention.md) — Prevents cumulative layout shifts by defining placeholder dimensions for lazy-loaded elements.
- [Visibility Polling](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/event-handling-architectures/event-handling-systems/event-queue-polling/kernel-event-polling/visibility-polling.md) — Provides manual visibility checks triggered by window resize or scroll events to ensure rendering accuracy.
- [Layout Placeholders](https://awesome-repositories.com/f/user-interface-experience/layout-placeholders.md) — Uses sized placeholders to reserve screen space and prevent layout shifts during lazy loading.