Skip to content

Commit 37e85f6

Browse files
lsycxyjlsycxyj
committed
documentation
1 parent ae0804c commit 37e85f6

File tree

7 files changed

+212
-68
lines changed

7 files changed

+212
-68
lines changed

‎README.md‎

Lines changed: 125 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ LGPL-V3
1414
- Progressive configuration
1515
- Flexible events to trigger loading
1616
- Lazyload as src attribute and background image are supported
17-
- Performance boost by event delegation and passive event listener if it's available
17+
- Performance boost by event delegation and passive event listener when it's available
1818

1919
## Installation
2020

@@ -29,6 +29,7 @@ import { VueLLazyload } from 'v-l-lazyload';
2929
Vue.use(VueLLazyload, {
3030
events: 'scroll'
3131
});
32+
// The root $lazy "Vue.$lazy" will be available after it's been installed
3233
```
3334
```html
3435
<img lazy="xxx.png">
@@ -55,8 +56,107 @@ Vue.use(VueLLazyload, config);
5556
</tr>
5657
</thead>
5758
<tbody>
59+
<tr>
60+
<td>ref</td>
61+
<td>String</td>
62+
<td>`null`</td>
63+
<td>
64+
The name of parent view (lazy-ref component or window).
65+
If it's not specified, it will be the window.
66+
</td>
67+
</tr>
68+
<tr>
69+
<td>src</td>
70+
<td>String</td>
71+
<td>''</td>
72+
<td>The resource url going to be loaded.</td>
73+
</tr>
74+
<tr>
75+
<td>events</td>
76+
<td>String or Array<String></td>
77+
<td>scroll</td>
78+
<td>Events to be bound with </td>
79+
</tr>
80+
<tr>
81+
<td>classLoading</td>
82+
<td>String</td>
83+
<td>lazy-loading</td>
84+
<td>Class name of loading</td>
85+
</tr>
86+
<tr>
87+
<td>classLoaded</td>
88+
<td>String</td>
89+
<td>lazy-loaded</td>
90+
<td>Class name of loaded</td>
91+
</tr>
92+
<tr>
93+
<td>classErr</td>
94+
<td>String</td>
95+
<td>lazy-err</td>
96+
<td>Class name of load error</td>
97+
</tr>
98+
<tr>
99+
<td>classTarget</td>
100+
<td>String</td>
101+
<td>self</td>
102+
<td>
103+
Element (real node) of class name to be changed when the load stat changes. <br>
104+
If it's set to `parent`, the class name of parent element will be changed. <br>
105+
By default, the class name of element it self will be changed.
106+
</td>
107+
</tr>
108+
<tr>
109+
<td>retry</td>
110+
<td>Integer</td>
111+
<td>0</td>
112+
<td>Retry amount, 0 for no retry, -1 for infinite retry.</td>
113+
</tr>
114+
<tr>
115+
<td>once</td>
116+
<td>Boolean</td>
117+
<td>true</td>
118+
<td>Remove listener after it has loaded if it is set to true.</td>
119+
</tr>
120+
<tr>
121+
<td>preloadRatio</td>
122+
<td>Number</td>
123+
<td>1</td>
124+
<td>The "resize" ratio of parent view when it's children views compare with it.</td>
125+
</tr>
126+
<tr>
127+
<td>mode</td>
128+
<td>String</td>
129+
<td>-</td>
130+
<td>
131+
The mode the lazyload.
132+
If it's set to 'bg', the resource will be loaded as a background image.
133+
By default, it will be set as the "src" attribute of the element.
134+
</td>
135+
</tr>
58136
</tobdy>
59137
</table>
138+
[1]: All options should not be changed after they have initialized except for [2]
139+
[2]: It will mark the node not loaded and load again when it's in parent view. if `once` is set to `false`.
140+
[3]: All options will inherit its ancestors' options.
141+
142+
## Methods
143+
### $lazy
144+
<table class="table table-bordered table-striped">
145+
<thead>
146+
<tr>
147+
<th style="width: 100px;">Name</th>
148+
<th>Arguments</th>
149+
<th>Description</th>
150+
</tr>
151+
</thead>
152+
<tbody>
153+
<tr>
154+
<td>check</td>
155+
<td>-</td>
156+
<td>Manually check and load itself and its children elements which haven't loaded.</td>
157+
</tr>
158+
</tbody>
159+
</table>
60160

61161
## Directives
62162
### v-lazy
@@ -81,6 +181,30 @@ Vue.use(VueLLazyload, config);
81181

82182
## Components
83183
### lazy-ref
184+
<table class="table table-bordered table-striped">
185+
<thead>
186+
<tr>
187+
<th style="width: 100px;">Name</th>
188+
<th style="width: 50px;">Type</th>
189+
<th style="width: 50px;">Default</th>
190+
<th>Description</th>
191+
</tr>
192+
</thead>
193+
<tbody>
194+
<tr>
195+
<td>tag</td>
196+
<td>String</td>
197+
<td>div</td>
198+
<td>The tag name of the wrapper component when it renders.</td>
199+
</tr>
200+
<tr>
201+
<td>opts</td>
202+
<td>Object</td>
203+
<td>null</td>
204+
<td>It has the same spec as config</td>
205+
</tr>
206+
</tbody>
207+
</table>
84208

85209
## Well, what's next?
86210
- More options for configuration

‎build/webpack.prod.conf.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,11 @@ var path = require('path'),
2121
libraryTarget: 'umd',
2222
library: 'vue-l-lazyload'
2323
},
24-
vue: {
25-
loaders: utils.cssLoaders({
26-
extract: true
27-
})
28-
},
24+
// vue: {
25+
// loaders: utils.cssLoaders({
26+
// extract: true
27+
// })
28+
// },
2929
plugins: [
3030
new webpack.optimize.UglifyJsPlugin({
3131
compress: {
@@ -38,7 +38,7 @@ var path = require('path'),
3838
}
3939
}),
4040
new webpack.optimize.OccurrenceOrderPlugin(),
41-
new ExtractTextPlugin('[name].css'),
41+
// new ExtractTextPlugin('[name].css'),
4242
new CompressionWebpackPlugin({
4343
asset: '[path].gz[query]',
4444
algorithm: 'gzip',
@@ -47,7 +47,7 @@ var path = require('path'),
4747
['js', 'css'].join('|') +
4848
')$'
4949
),
50-
threshold: 10240,
50+
threshold: 5 * 1024,
5151
minRatio: 0.8
5252
})
5353
]

‎dist/main.js‎

Lines changed: 12 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/main.js.gz‎

3.57 KB
Binary file not shown.

‎src/index.js‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,3 @@
1-
/**
2-
* @preserve
3-
* vue-l-lazyload
4-
*
5-
* Copyright (c) 2017 - NOW Light Leung
6-
*
7-
* This library is distributed in the hope that it will be useful,
8-
* but WITHOUT ANY WARRANTY; without even the implied warranty of
9-
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
10-
* Lesser General Public License for more details.
11-
*/
121
import { $ } from './util';
132
import { LazyClass } from './lazy';
143

@@ -156,6 +145,17 @@ const VueLLazyload = {
156145
},
157146
};
158147

148+
/**
149+
* @license
150+
* vue-l-lazyload
151+
*
152+
* Copyright (c) 2017 - NOW Light Leung
153+
*
154+
* This library is distributed in the hope that it will be useful,
155+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
156+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
157+
* Lesser General Public License for more details.
158+
*/
159159
export {
160160
LazyRef,
161161
Lazy,

‎src/lazy.js‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -185,12 +185,13 @@ export function LazyClass(scope) {
185185
classLoaded: CLASS_LOADED,
186186
// Class name of load error
187187
classErr: CLASS_ERR,
188-
// Element of class name to be changed
188+
// Element of class name to be changed when the load stat changes
189189
classTarget: CLASS_TARGET_SELF,
190190
// Retry amount, 0 for no retry, -1 for infinite retry.
191191
retry: 0,
192192
// Remove listener after it has loaded if it is set to true.
193193
once: true,
194+
// The "resize" ratio of parent view when it's children views compare with it.
194195
preloadRatio: 1,
195196
...opts,
196197
};
@@ -257,6 +258,7 @@ export function LazyClass(scope) {
257258
const
258259
parentEl = parent.el,
259260
preloadRatio = me.opts.preloadRatio,
261+
extraPreloadRatio = 1 - preloadRatio,
260262
isWin = parentEl === win,
261263
parentElOffset = isWin ? {
262264
// IE, I'm looking at you
@@ -268,18 +270,24 @@ export function LazyClass(scope) {
268270
elOffset = offset(me.el),
269271
parentElLeft = parentElOffset.left,
270272
parentElTop = parentElOffset.top,
271-
parentElWidth = parentElOffset.width * preloadRatio,
272-
parentElHeight = parentElOffset.height * preloadRatio,
273+
parentElWidth = parentElOffset.width,
274+
parentElHeight = parentElOffset.height,
275+
parentElExtraWidth = parentElWidth * extraPreloadRatio,
276+
parentElExtraHeight = parentElHeight * extraPreloadRatio,
277+
parentElFixedTop = parentElTop - parentElExtraHeight / 2,
278+
parentElFixedLeft = parentElLeft - parentElExtraWidth / 2,
279+
parentElFixedWidth = parentElWidth + parentElExtraWidth,
280+
parentElFixedHeight = parentElHeight + parentElExtraHeight,
273281
elLeft = elOffset.left,
274282
elTop = elOffset.top,
275283
elWidth = elOffset.width,
276284
elHeight = elOffset.height;
277285

278286
// Collision detection
279-
if (elLeft < parentElLeft + parentElWidth &&
280-
elLeft + elWidth > parentElLeft &&
281-
elTop < parentElTop + parentElHeight &&
282-
elTop + elHeight > parentElTop) {
287+
if (elLeft < parentElFixedLeft + parentElFixedWidth &&
288+
elLeft + elWidth > parentElFixedLeft &&
289+
elTop < parentElFixedTop + parentElFixedHeight &&
290+
elTop + elHeight > parentElFixedTop) {
283291
result = true;
284292
}
285293
}

‎test/unit/specs/lazyload.spec.js‎

Lines changed: 42 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -6,45 +6,45 @@ import {cssTextToObject, createVM, destroyVM, genImgSrc, genImgList} from '../ut
66

77
jasmine.DEFAULT_TIMEOUT_INTERVAL = 20 * 1000;
88

9-
describe('Suite: test vue-l-lazyload', () => {
10-
const $body = $('body');
11-
let vm;
12-
13-
$body.css({
14-
padding: 0,
15-
margin: 0,
16-
});
17-
18-
afterEach(() => {
19-
destroyVM(vm);
20-
});
21-
22-
function setup(data) {
23-
destroyVM(vm);
24-
vm = createVM(
25-
`
26-
<div>
27-
</div>
28-
`,
29-
{
30-
...data,
31-
});
32-
}
33-
34-
it('default behavior', (done) => {
35-
destroyVM(vm);
36-
vm = createVM(
37-
`
38-
<div>
39-
</div>
40-
`,
41-
{
42-
data() {
43-
return {
44-
};
45-
},
46-
});
47-
const $el = $(vm.$el);
48-
});
49-
50-
});
9+
// describe('Suite: test vue-l-lazyload', () => {
10+
// const $body = $('body');
11+
// let vm;
12+
//
13+
// $body.css({
14+
// padding: 0,
15+
// margin: 0,
16+
// });
17+
//
18+
// afterEach(() => {
19+
// destroyVM(vm);
20+
// });
21+
//
22+
// function setup(data) {
23+
// destroyVM(vm);
24+
// vm = createVM(
25+
// `
26+
// <div>
27+
// </div>
28+
// `,
29+
// {
30+
// ...data,
31+
// });
32+
// }
33+
//
34+
// it('default behavior', (done) => {
35+
// destroyVM(vm);
36+
// vm = createVM(
37+
// `
38+
// <div>
39+
// </div>
40+
// `,
41+
// {
42+
// data() {
43+
// return {
44+
// };
45+
// },
46+
// });
47+
// const $el = $(vm.$el);
48+
// });
49+
//
50+
// });

0 commit comments

Comments
 (0)