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 loadandcontinuous lazy loadmode wheel/mousewheel/resizeevent handler is debounced so you won't suffer 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 react-lazyload@0.2.4
import React from 'react';
import ReacrDOM from 'react-dom';
import createLazyLoad from 'react-lazyload';
import MyComponent from './MyComponent';
const LazyLoad = createLazyLoad({
eventType: 'scroll resize wheel',
rateLimit: 'debounce',
wait: 300
});
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);
By default, you will import a factory from react-lazyload which will create a LazyLoad component according to options you passed in.
Type: String Default: 'scroll'
Which kind of events should LazyLoad listen to. Multiple event types can be a string separated by a white space. Eg. 'scroll wheel'.
Other options would be 'wheel' or 'resize'.
For overflow containers, scroll event not propagated to window, so you should use wheel props to make LazyLoad listen wheel event instead of scroll. Check this demo for detail.
NOTICE If you tend to support legacy IE, set this props carefully, refer to this question for further reading.
Type: String Default: 'debounce'
Which kind of rate limit method should we use. It is highly recommended to use at lease one kind of rate limit method because of the high invoke frequency of scroll event.
An alternative option would be 'throttle'.
Type: Number Default: 300
How many ms should rate limit method wait.
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/Array(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.
If you provide this props with array like [200, 200], it will set top edge offset and bottom edge offset respectively.
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