React Progressive Loader：用于逐步加载图像和React组件的实用程序

React Progressive Loader：用于逐步加载图像和React组件的实用程序

React Progressive Loader

Defer the load of non-critical images and components if they are off-screen.

This library makes possible to progressively load images, just like Medium does, and React components only when the user is ready to consume the content. Additionaly, take component based code splitting for free. Two at the price of one.

Lazy Loading Images: https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/

InstallationUsageComponentsDeferImg

Installation

// with yarnyarn add react-progressive-loader// with npmnpm install react-progressive-loader

Usage

// ES2015+ and TSimport { Defer, Img } from 'react-progressive-loader'

Components

Defer

Defers the loading of a React component

Props:

render: The content to renderrenderPlaceholder: The content to render while the content is loadingloadOnScreen: Load the content only when the area it is going to be rendered is visible for the user

If case the React component is default-exported in ./comp module

import('./comp')} renderPlaceholder={() =>

If the component is not default-exported

// './comp.jsx'export const MyComp = () => 'Loaded!'// './app.jsx' import('./comp').then(({MyComp}) => )}/>

The render prop can also be a React element

} renderPlaceholder={() =>

Load the content only when it is on-screen

} renderPlaceholder={() =>

Img

Progressively load images. This component makes a smooth animated transition in the following order:

[Background]->[Placeholder]->[Content]

Props:

src: The source of the contentplaceholderSrc: The source of the image that is going to be showed while the content is loadingsrcSet: The source of the content (see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset)sizes: A set of source sizes (see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes)bgColor: The color of the backgroud that is going to be showed while the placeholder is loadingaspectRatio: A static aspect ratio for image, placeholder, and background color. The aspect ratio provided must be calculated in the following way: height / widthloadOnScreen: Load the content only when the area it is going to be rendered is visible for the useralt: Alternative text (see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-alt)

Any other prop (not listed here) passed to this components will be passed down to the wrapper div

Basic usage

Transitioning only between background and content. Sometimes you may want to transit only from background to content by finding the dominant color of the image and assigning it to bgColor. This strategy is used by Google image search.

Load the content only when it is on-screen

This library uses IntersectionObserver API, for wide browser compatibility consider to add a polyfill

Published under MIT Licence

(c) Yosbel Marin 2018

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。