目錄
基本介紹
安裝
使用?
基本使用
詳細屬性
基本介紹
react-lazyload 是一個 React 組件，用于延遲加載（懶加載）頁面上的圖片或其他資源。懶加載是一種優化手段，它允許頁面在初次加載時只加載可視區域內的內容，而在用戶滾動頁面時再加載其他部分的內容，從而提高頁面加載性能。
Github:GitHub - twobin/react-lazyload: Lazy load your component, image or anything matters the performance.Lazy load your component, image or anything matters the performance. - GitHub - twobin/react-lazyload: Lazy load your component, image or anything matters the performance.
https://github.com/twobin/react-lazyload
安裝
# 使用 npm
npm install react-lazyload# 使用 yarn
yarn add react-lazyload
博主這里安裝的是3.2.0版本。?
使用?
基本使用
import React from 'react';
import LazyLoad from 'react-lazyload';const MyComponent = () => (<div><h1>My Component</h1>{/* 使用 LazyLoad 包裝需要懶加載的內容 */}<LazyLoad height={200} offset={100}><img src="path/to/your/image.jpg" alt="Lazy Loaded Image" /></LazyLoad></div>
);export default MyComponent;
詳細屬性
| 屬性名稱 | 作用 | 示例 |
| height | height 屬性指定了在 LazyLoad 組件加載前要保留的高度。 | <LazyLoad height={200} > </LazyLoad> |
offset | offset 屬性指定了在視窗之外多少像素的范圍內開始加載懶加載組件。 | <LazyLoad offset={200} > </LazyLoad> |
once | once屬性控制了一旦懶加載的內容被加載，是否只加載一次。 | <LazyLoad once>...</LazyLoad> |
placeholder | placeholder屬性定義在懶加載內容加載前顯示的占位元素。 | <LazyLoad placeholder={<div>Loading...</div>}>...</LazyLoad> |
debounce | debounce屬性規定懶加載事件的防抖延遲時間（以毫秒為單位）。 | <LazyLoad debounce={300}>...</LazyLoad> |
throttle | throttle屬性規定懶加載事件的節流時間（以毫秒為單位）。 | <LazyLoad throttle={300}>...</LazyLoad> |
resize | resize屬性決定了是否監聽窗口大小變化并重新計算懶加載的位置。 | <LazyLoad resize>...</LazyLoad> |
還有一些其他屬性詳見Github官方文檔。
https://github.com/twobin/react-lazyload#readmehttps://github.com/twobin/react-lazyload#readme
?
