Package Exports

react-lazyload
react-lazyload/lib/utils/debounce
react-lazyload/lib/utils/event

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-lazyload) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-lazyload

Lazyload your Component, Image or anything matters the performance.

Work in progress, use at your own risk!!

Online Demo

Why it's better

Take performance in mind, only 2 event listeners for all lazy-loaded components
Support both one-time lazy load and continuous lazy load mode
IE 8 compatible

Usage

import React from 'react';
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>
          <MyComponent />
        </LazyLoad>
        <LazyLoad>
          <MyComponent />
        </LazyLoad>
        <LazyLoad>
          <MyComponent />
        </LazyLoad>
      </div>
    );
  }
});

React.render(<App />, document.body);

Props

Once

Type: Bool Default: false

Once the lazy loaded component is mounted, do not detect scroll/resize event anymore. Useful for images or simple components.

Scripts

$ npm run demo
$ npm run build

License

MIT