Lazyload your Components, Images or anything matters the performance.
- Take performance in mind, only 2 event listeners for all lazy-loaded components
- Support both
one-time lazy load
andcontinuous lazy load
mode scroll
/resize
event handler is debounced so you won't suffer with frequent update- IE 8 compatible
Let's say there is a fixed
date picker on the page, when user pick a different date, all components displaying data should send ajax request with new date parameter to retreive updated data, even many of them aren't visible in viewport. This makes server load furious when there are too many requests in one page.
Using LazyLoad
component will help ease this situation by only update components in viewport.
$ npm install --save react-lazyload
// If you tend to support React v0.13, you should use v0.2.4 which is the
// latest compatible version
$ npm install --save [email protected]
import React from 'react';
import ReacrDOM from 'react-dom';
import LazyLoad from 'react-lazyload';
import MyComponent from './MyComponent';
const App = React.createClass({
render() {
return (
<div className="list">
<LazyLoad>
<MyComponent />
</LazyLoad>
<LazyLoad>
<MyComponent />
</LazyLoad>
<LazyLoad once > /* Once this component is loaded, LazyLoad will
not care about it anymore, stuff like images
should add `once` props to reduce listeners for
scroll/resize event and improve performance */
<MyComponent />
</LazyLoad>
<LazyLoad offset={100}> /* This component will be loaded when it's top
edge is 100px from viewport. It's useful to
make user ignorant about lazy load effect. */
<MyComponent />
</LazyLoad>
<LazyLoad>
<MyComponent />
</LazyLoad>
</div>
);
}
});
ReactDOM.render(<App />, document.body);
Type: Bool Default: false
Once the lazy loaded component is loaded, do not detect scroll/resize event anymore. Useful for images or simple components.
Type: Number Default: 0
Say if you want to preload a module even if it's 100px below the viewport (user have to scroll 100px more to see this module), you can set offset
props to 100
. On the other hand, if you want to delay loading a module even if it's top edge has already appeared at viewport, set offset
props to negative number will make it delay loading.
Type: Bool Default: true
Respond to scroll
event, this is default behaviour.
Type: Bool Default: false
Respond to resize
event, set it to true
if you do need LazyLoad listen resize event.
NOTICE If you tend to support legacy IE, set this props carefully, refer to this question for further reading.
Like the example above, <MyComponent>
will get following extra props:
Type: Bool
Is component currently visible
Is component first time visible, useful for children component's componentWillReceiveProps
detect whether or not should query new data.
$ npm run demo:watch
$ npm run build
MIT