twobin/react-lazyload
React Lazyload
react-lazyload 是一个 React 组件和视口可见性包装器，旨在通过推迟屏幕外 UI 元素的显示来最小化资源消耗。它作为一个前端性能优化器，延迟图像或组件的渲染，直到它们进入浏览器视口。
该库通过允许定义占位符尺寸来防止布局偏移，在内容懒加载时保持页面稳定性。它使用内部状态和可选动画管理从这些占位符到实际内容的过渡。
该系统提供了视口可见性检测机制、强制立即挂载的手动显示覆盖，以及在标准滚动或调整大小事件不足时使用的手动可见性触发器。
Features
- Frontend Performance Optimization - Optimizes frontend performance by delaying the rendering of off-screen components and images.
- Component Lazy Loadings - Implements deferred loading for React elements to reduce initial resource consumption.
- Item Visibility Detection - Triggers component rendering only after the element becomes visible within the viewport or overflow container.
- Viewport Visibility Observers - Tracks when elements enter the viewport to trigger the loading of deferred content.
- Lazy Content Mounting - Defers the rendering of React components until they are triggered to become visible.
- Intersection Observer Implementations - Uses the Intersection Observer API to detect when elements enter the viewport and trigger rendering.
- Deferred Loading - Delays the loading and rendering of components or images until they enter the viewport.
- Cumulative Layout Shift Prevention - Prevents cumulative layout shifts by defining placeholder dimensions for lazy-loaded elements.
- Visibility Polling - Provides manual visibility checks triggered by window resize or scroll events to ensure rendering accuracy.
- Layout Placeholders - Uses sized placeholders to reserve screen space and prevent layout shifts during lazy loading.
- Dimension Specification - Allows specifying element dimensions before they become visible to prevent layout shifts.
