35 |
{this.props.count}
36 | {this.props.once ? (
37 |
38 |
39 | <LazyLoad once>
40 | <Widget />
41 | </LazyLoad>
42 |
43 |
44 | ) : (
45 |
46 |
47 | <LazyLoad>
48 | <Widget />
49 | </LazyLoad>
50 |
51 |
52 | )}
53 |
render times: {this.state.count}
54 |
props from parent: {this.props.id}
55 |
38 |
39 |
40 | {this.state.arr.map((el, index) => {
41 | return (
42 |
43 |
44 |
45 | );
46 | })}
47 |
48 |
44 |
45 |
46 | {this.state.arr.map((el, index) => {
47 | return (
48 |
49 | );
50 | })}
51 |
52 |
11 |
12 |
13 |
14 |
20 | 
21 |
22 |
23 |
24 |
30 | 
31 |
32 |
33 |
34 |
40 | 
41 |
42 |
43 |
44 |
50 | 
51 |
52 |
53 |
54 |
60 | 
61 |
62 |
63 |
64 |
70 | 
71 |
72 |
73 |
74 |
80 | 
81 |
82 |
83 |
84 |
90 | 
91 |
92 |
93 |
94 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
38 |
39 |
40 | {this.state.arr.map((el, index) => {
41 | return (
42 |
43 |
44 |
45 | );
46 | })}
47 |
48 |
38 |
39 |
LazyLoad in Overflow Container
40 |
41 | {this.state.arr.map((el, index) => {
42 | return (
43 |
44 |
45 |
46 | );
47 | })}
48 |
49 |
39 |
40 |
41 | {this.state.arr.map((el, index) => {
42 | return (
43 | } debounce={500}>
45 |
46 |
47 | );
48 | })}
49 |
50 |
42 |
43 |
44 |
Quick jump to:
45 | {this.state.arr.map((el, index) => (
46 |
{index + 1}
47 | ))}
48 |
49 |
50 | {this.state.arr.map((el, index) => (
51 |
52 |
53 |
54 |
55 |
56 | ))}
57 |
58 |
343 | {this.visible ? (
344 | children
345 | ) : placeholder ? (
346 | placeholder
347 | ) : (
348 |
352 | )}
353 |
20 | {this.state.times}
21 | {this.props.children}
22 |
23 | );
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/test/karma.conf.js:
--------------------------------------------------------------------------------
1 | // Karma configuration
2 | // Generated on Wed Mar 18 2015 11:41:18 GMT+0800 (CST)
3 | 'use strict';
4 |
5 | const process = require('process');
6 | process.env.CHROME_BIN = require('puppeteer').executablePath();
7 |
8 | module.exports = function (config) {
9 | config.set({
10 |
11 | // base path that will be used to resolve all patterns (eg. files, exclude)
12 | basePath: '../',
13 |
14 |
15 | // frameworks to use
16 | // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
17 | frameworks: ['mocha', 'chai'],
18 |
19 | // list of files / patterns to load in the browser
20 | files: [
21 | { pattern: 'test/specs/*.js', included: true, watched: false },
22 | ],
23 |
24 |
25 | // list of files to exclude
26 | exclude: [
27 | 'test/coverage/**',
28 | 'lib/**',
29 | 'node_modules/'
30 | ],
31 |
32 |
33 | // preprocess matching files before serving them to the browser
34 | // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
35 | preprocessors: {
36 | 'test/**/*.js': ['webpack', 'sourcemap'],
37 | },
38 |
39 | webpack: {
40 | devtool: 'inline-source-map',
41 | module: {
42 | loaders: [{
43 | test: /\.jsx?$/,
44 | include: /src|test|demo/,
45 | query: {
46 | presets: ['stage-0', 'es2015', 'react'],
47 | plugins: ['transform-decorators-legacy']
48 | },
49 | loader: 'babel'
50 | }],
51 | postLoaders: [{
52 | test: /\.js$/,
53 | include: /src/,
54 | loader: 'istanbul-instrumenter'
55 | }]
56 | },
57 | resolve: {
58 | extensions: ['', '.js', '.jsx']
59 | }
60 | },
61 |
62 |
63 | plugins: [
64 | 'karma-webpack',
65 | 'karma-mocha',
66 | 'karma-coverage',
67 | 'karma-chai',
68 | 'karma-sourcemap-loader',
69 | 'karma-chrome-launcher',
70 | 'istanbul-instrumenter-loader',
71 | 'karma-coveralls'
72 | ],
73 |
74 |
75 | // test results reporter to use
76 | // possible values: 'dots', 'progress'
77 | // available reporters: https://npmjs.org/browse/keyword/karma-reporter
78 | reporters: ['progress', 'coverage', 'coveralls'],
79 |
80 | coverageReporter: {
81 | dir: 'test',
82 | reporters: [{
83 | type: 'html',
84 | subdir: 'coverage'
85 | }, {
86 | type: 'text',
87 | }, {
88 | type: 'lcov',
89 | subdir: 'coverage'
90 | }]
91 | },
92 |
93 | // web server port
94 | port: 9876,
95 |
96 |
97 | // enable / disable colors in the output (reporters and logs)
98 | colors: true,
99 |
100 |
101 | // level of logging
102 | // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
103 | logLevel: config.LOG_DEBUG,
104 |
105 |
106 | // enable / disable watching file and executing tests whenever any file changes
107 | autoWatch: true,
108 |
109 | customLaunchers: {
110 | Chrome_travis_ci: {
111 | base: 'ChromeHeadless',
112 | flags: ['--no-sandbox']
113 | }
114 | },
115 |
116 | // start these browsers
117 | // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
118 | browsers: ['Chrome', 'ChromeHeadless'],
119 |
120 | browserNoActivityTimeout: 300000,
121 | browserDisconnectTimeout: 300000,
122 |
123 | // Continuous Integration mode
124 | // if true, Karma captures browsers, runs the tests and exits
125 | singleRun: false,
126 | processKillTimeout: 300000,
127 | });
128 | };
129 |
--------------------------------------------------------------------------------
/test/specs/events.spec.js:
--------------------------------------------------------------------------------
1 | import spies from 'chai-spies';
2 | import * as event from '../../src/utils/event';
3 | chai.use(spies);
4 |
5 | describe('Event', () => {
6 | const fakeCallBack = chai.spy();
7 |
8 | it('should call attachEvent when addEventListener does not exist', () => {
9 | document.addEventListener = null;
10 | var fakeAttachEvent = chai.spy();
11 | document.attachEvent = fakeAttachEvent;
12 |
13 |
14 | event.on(document, 'click', fakeCallBack);
15 | expect(fakeAttachEvent).to.be.called.once;
16 | });
17 |
18 |
19 | it('should call detachEvent when removeEventListener does not exist', () => {
20 | document.removeEventListener = null;
21 | var fakeDetachEvent = chai.spy();
22 | document.detachEvent = fakeDetachEvent;
23 |
24 | event.off(document, 'click', fakeCallBack);
25 | expect(fakeDetachEvent).to.be.called.once;
26 | });
27 | });
28 |
--------------------------------------------------------------------------------
/test/specs/lazyload.debounce.spec.js:
--------------------------------------------------------------------------------
1 | /* eslint no-unused-expressions: 0 */
2 | import React from 'react';
3 | import ReactDOM from 'react-dom';
4 | import LazyLoad from '../../src/index';
5 | import spies from 'chai-spies';
6 | import Test from '../Test.component';
7 |
8 | chai.use(spies);
9 | const expect = chai.expect;
10 |
11 |
12 | before(() => {
13 | document.body.style.margin = 0;
14 | document.body.style.padding = 0;
15 | });
16 |
17 | let div;
18 |
19 | beforeEach(() => {
20 | div = document.createElement('div');
21 | document.body.appendChild(div);
22 | });
23 |
24 | afterEach(() => {
25 | ReactDOM.unmountComponentAtNode(div);
26 | div.parentNode.removeChild(div);
27 | window.scrollTo(0, 0);
28 | });
29 |
30 | describe('Throttle', () => {
31 | it('should throttle scroll event by default', (done) => {
32 | const windowHeight = window.innerHeight + 1;
33 | ReactDOM.render(
34 |
35 |
36 |
37 |
38 |
39 | , div);
40 |
41 | window.scrollTo(0, 10);
42 |
43 | setTimeout(() => {
44 | window.scrollTo(0, 9999);
45 | }, 50);
46 |
47 | setTimeout(() => {
48 | window.scrollTo(0, 10);
49 | }, 50);
50 |
51 | // let `scroll` event handler done their job first
52 | setTimeout(() => {
53 | expect(document.querySelectorAll('.test').length).to.equal(2);
54 | done();
55 | }, 500);
56 | });
57 | });
58 |
--------------------------------------------------------------------------------
/test/specs/lazyload.spec.js:
--------------------------------------------------------------------------------
1 | /* eslint no-unused-expressions: 0 */
2 | import React from 'react';
3 | import ReactDOM from 'react-dom';
4 | import LazyLoad, { lazyload } from '../../src/index';
5 | import spies from 'chai-spies';
6 | import Test from '../Test.component';
7 | import * as event from '../../src/utils/event';
8 |
9 | chai.use(spies);
10 | const expect = chai.expect;
11 |
12 |
13 | before(() => {
14 | document.body.style.margin = 0;
15 | document.body.style.padding = 0;
16 | });
17 |
18 | let div;
19 |
20 | beforeEach(() => {
21 | div = document.createElement('div');
22 | document.body.appendChild(div);
23 | });
24 |
25 | afterEach(() => {
26 | ReactDOM.unmountComponentAtNode(div);
27 | div.parentNode.removeChild(div);
28 | window.scrollTo(0, 0);
29 | });
30 |
31 | describe('LazyLoad', () => {
32 | describe('Basic setup', () => {
33 | it('should render passed children', () => {
34 | ReactDOM.render(, div);
35 | expect(document.querySelector('.test')).to.exist;
36 | });
37 |
38 | it('should render `lazyload-placeholder` when children not visible', () => {
39 | ReactDOM.render(
40 |
41 | 123
42 | 123
43 |
44 | , div);
45 |
46 | expect(document.querySelector('.something')).to.exist;
47 | expect(document.querySelector('.lazyload-placeholder')).to.exist;
48 | expect(document.querySelector('.treasure')).to.not.exist;
49 | });
50 |
51 | it('should NOT update when invisble', (done) => {
52 | ReactDOM.render(
53 |
54 |
55 |
56 |
57 | , div);
58 |
59 | expect(document.querySelector('.test1 .times').textContent).to.equal('1');
60 | expect(document.querySelector('.test2')).to.not.exist;
61 |
62 | ReactDOM.render(
63 |
64 |
65 |
66 |
67 | , div);
68 |
69 | expect(document.querySelector('.test1 .times').textContent).to.equal('2');
70 | expect(document.querySelector('.test2')).to.not.exist;
71 |
72 | window.scrollTo(0, 99999);
73 |
74 | setTimeout(() => {
75 | expect(document.querySelector('.test2 .times').textContent).to.equal('1');
76 |
77 | ReactDOM.render(
78 |
79 |
80 |
81 |
82 | , div);
83 |
84 | expect(document.querySelector('.test1 .times').textContent).to.equal('2');
85 | expect(document.querySelector('.test2 .times').textContent).to.equal('2');
86 | done();
87 | }, 500);
88 | });
89 |
90 | it('should NOT controlled by LazyLoad when `once` and visible', (done) => {
91 | ReactDOM.render(
92 |
93 |
94 |
95 |
96 | , div);
97 |
98 | ReactDOM.render(
99 |
100 |
101 |
102 |
103 | , div);
104 |
105 | window.scrollTo(0, 99999);
106 |
107 | setTimeout(() => {
108 | ReactDOM.render(
109 |
110 |
111 |
112 |
113 | , div);
114 |
115 | // Differnce between the test above
116 | expect(document.querySelector('.test1 .times').textContent).to.equal('3');
117 | done();
118 | }, 500);
119 | });
120 |
121 | it('should render `placeholder` if provided', () => {
122 | ReactDOM.render(
123 |
124 |
}>
125 |
126 |
127 | }>
128 |
129 |
130 | , div);
131 |
132 | expect(document.querySelector('.my-placeholder')).to.exist;
133 | });
134 | it('should render `placeholder` and `wrapper` elements with custom `classNamePrefix` when provided', () => {
135 | ReactDOM.render(
136 |
137 |
138 | 123
139 |
140 |
141 | 123
142 |
143 |
, div);
144 | console.log(div.innerHTML);
145 | expect(document.querySelector('.custom-lazyload-wrapper')).to.exist;
146 | expect(document.querySelector('.custom-lazyload-placeholder')).to.exist;
147 | });
148 | it('should render wrapper with `style` when provided', () => {
149 | ReactDOM.render(
150 |
151 |
152 | 123
153 |
154 |
, div);
155 | console.log(div.innerHTML);
156 | expect(document.querySelector('.custom-lazyload-wrapper').getBoundingClientRect().height).to.equal(200);
157 | })
158 | });
159 |
160 | describe('Checking visibility', () => {
161 | it('should consider visible when top edge is visible', () => {
162 | const windowHeight = window.innerHeight;
163 | ReactDOM.render(
164 |
165 | 123
166 | 123
167 |
168 | , div);
169 |
170 | expect(document.querySelector('.something')).to.exist;
171 | expect(document.querySelector('.lazyload-placeholder')).to.not.exist;
172 | expect(document.querySelector('.treasure')).to.exist;
173 | });
174 |
175 | it('should render children when scrolled visible', (done) => {
176 | const windowHeight = window.innerHeight + 20;
177 | ReactDOM.render(
178 |
179 | 123
180 | 123
181 |
182 | , div);
183 |
184 | expect(document.querySelector('.lazyload-placeholder')).to.exist;
185 | window.scrollTo(0, 50);
186 |
187 | setTimeout(() => {
188 | expect(document.querySelector('.lazyload-placeholder')).to.not.exist;
189 | expect(document.querySelector('.treasure')).to.exist;
190 | done();
191 | }, 1000);
192 | });
193 |
194 | it('should work inside overflow container', (done) => {
195 | ReactDOM.render(
196 |
197 |
123
198 |
123
199 |
123
200 |
{this.props.children}
229 | );
230 | }
231 | }
232 |
233 | ReactDOM.render(
234 |
235 | 1
236 | 2
237 | 3
238 |
239 | , div);
240 |
241 | expect(document.querySelectorAll('.test').length).to.equal(1);
242 | expect(document.querySelector('.lazyload-placeholder')).to.exist;
243 | });
244 | });
245 |
246 | describe('Overflow', () => {
247 | // https://github.com/jasonslyvia/react-lazyload/issues/71
248 | // http://stackoverflow.com/a/6433475/761124
249 | it('should not detect a overflow container when only one of the scroll property is auto\/scroll', () => {
250 | ReactDOM.render(
251 |
255 |
260 |
123
261 |
123
262 |
123
263 |
264 |
35 |
36 |
37 |
38 |
39 | , div);
40 |
41 | window.scrollTo(0, 9999);
42 |
43 | setTimeout(() => {
44 | window.scrollTo(0, 9999);
45 | }, 30);
46 |
47 | setTimeout(() => {
48 | window.scrollTo(0, 0);
49 | }, 60);
50 |
51 | setTimeout(() => {
52 | window.scrollTo(0, 9999);
53 | }, 90);
54 |
55 | setTimeout(() => {
56 | window.scrollTo(0, 0);
57 | }, 120);
58 |
59 | // let `scroll` event handler done their job first
60 | setTimeout(() => {
61 | expect(document.querySelectorAll('.test').length).to.equal(1);
62 | expect(document.querySelector('.lazyload-placeholder')).to.exist;
63 | done();
64 | }, 500);
65 | });
66 | });
67 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | 'use strict';
3 |
4 | var webpack = require('webpack');
5 | var path = require('path');
6 |
7 | var plugins = [
8 | new webpack.optimize.OccurenceOrderPlugin(),
9 | new webpack.DefinePlugin({
10 | 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
11 | })
12 | ];
13 |
14 | var DEV_MODE = process.env.NODE_ENV !== 'production';
15 |
16 | if (!DEV_MODE) {
17 | plugins.push(
18 | new webpack.optimize.UglifyJsPlugin({
19 | compressor: {
20 | warnings: false
21 | }
22 | })
23 | );
24 | }
25 |
26 | module.exports = {
27 | module: {
28 | loaders: [{
29 | test: /\.jsx?$/,
30 | loader: 'babel',
31 | exclude: /node_modules/
32 | }]
33 | },
34 |
35 | entry: {
36 | app: './examples/app.js',
37 | },
38 |
39 | watch: DEV_MODE,
40 | devtool: DEV_MODE ? 'inline-source-map' : 'source-map',
41 |
42 | output: {
43 | path: path.join(__dirname, 'examples/js/'),
44 | filename: 'bundle.min.js',
45 | publicPath: '/js/'
46 | },
47 |
48 | plugins: plugins,
49 | resolve: {
50 | extensions: ['', '.js', '.jsx']
51 | }
52 | };
53 |
--------------------------------------------------------------------------------
/*
53 | Lazy loading images is supported out of box,
54 | no extra config needed, set `height` for better
55 | experience
56 | */
57 | 
183 |
184 |
185 |
186 |
187 |
--------------------------------------------------------------------------------
/examples/js/vendors.js:
--------------------------------------------------------------------------------
1 | !function(e){function n(t){if(r[t])return r[t].exports;var a=r[t]={exports:{},id:t,loaded:!1};return e[t].call(a.exports,a,a.exports,n),a.loaded=!0,a.exports}var t=window.webpackJsonp;window.webpackJsonp=function(o,l){for(var p,s,c=0,i=[];c