Skip to content

Commit d5054fb

Browse files
author
yyh1102
committed
Add throttle and debounce
1 parent 307a579 commit d5054fb

File tree

12 files changed

+505
-383
lines changed

12 files changed

+505
-383
lines changed

‎README.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,4 +44,6 @@ Template
4444
| key | description | default | type |
4545
|:----|:------------|:--------|:-----|
4646
| offset | offset distance for pre-loading | 0 | Number |
47-
| events | events that you want parentNode listen for | ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove'] | Array |
47+
| events | events that you want parentNode listen for | ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove'] | Array |
48+
| throttle | spacing interval of continuous calling | 0(ms) | Number |
49+
| debounce | idle time between two actions | 0(ms) | Number |

‎config/webpack.prod.config.js

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,32 @@
1-
var webpack=require("webpack");
2-
var pack=require("../package.json");
3-
var webpackDevConfig=require("./webpack.dev.config");
4-
var merge=require("webpack-merge");
1+
var webpack = require("webpack");
2+
var pack = require("../package.json");
3+
var webpackDevConfig = require("./webpack.dev.config");
4+
var merge = require("webpack-merge");
55

6-
module.exports=merge.smart({},webpackDevConfig,{
7-
entry: {
8-
VueLazyImages:'./src/index'
9-
},
10-
plugins:[
11-
new webpack.optimize.UglifyJsPlugin({
12-
compress:{
13-
warnings:false,
14-
drop_console:false
15-
},
16-
comments:false,
17-
minimize:false
18-
}),
19-
new webpack.DefinePlugin({
20-
'process.env':{
21-
NODE_ENV:'"production"'
22-
}
23-
}),
24-
new webpack.BannerPlugin({
25-
raw:true,
26-
banner:'/*!\n' + ' * ' + pack.name + ' v' + pack.version + '\n'
27-
+ ' * (c) ' + new Date().getFullYear() + ' ' + pack.author + '\n'
28-
+ ' * Released under the ' + pack.license + ' License.\n'
29-
+ ' */'
30-
})
31-
]
6+
module.exports = merge.smart({}, webpackDevConfig, {
7+
entry: {
8+
VueLazyImages: './src/index'
9+
},
10+
plugins: [
11+
new webpack.optimize.UglifyJsPlugin({
12+
compress: {
13+
warnings: false,
14+
drop_console: false
15+
},
16+
comments: false,
17+
minimize: false
18+
}),
19+
new webpack.DefinePlugin({
20+
'process.env': {
21+
NODE_ENV: '"production"'
22+
}
23+
}),
24+
new webpack.BannerPlugin({
25+
raw: true,
26+
banner: '/*!\n' + ' * ' + pack.name + ' v' + pack.version + '\n'
27+
+ ' * (c) ' + new Date().getFullYear() + ' ' + pack.author + '\n'
28+
+ ' * Released under the ' + pack.license + ' License.\n'
29+
+ ' */'
30+
})
31+
]
3232
});

‎dist/VueLazyImages.js

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

‎dist/example.js

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

‎example/index.html

Lines changed: 78 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,87 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8">
5-
<title>Example Test</title>
6-
<style>
7-
*{
8-
margin:0;
9-
padding:0;
10-
}
11-
#App{
12-
padding-top:50px;
13-
}
14-
.notice{
15-
padding:10px;
16-
font-size:14px;
17-
}
18-
.scrollY{
19-
position: relative;
20-
width:100%;
21-
max-height:46vh;
22-
overflow: auto;
23-
margin-bottom:5px;
24-
}
25-
.scrollX{
26-
width:100%;
27-
white-space: nowrap;
28-
overflow-x: auto;
29-
}
30-
.header{
31-
position: fixed;
32-
top:0;
33-
width:100%;
34-
height:50px;
35-
background-color: #0097A7;
36-
z-index:1;
37-
}
38-
.header .addBtn{
39-
margin:7px;
40-
padding:10px 15px;
41-
border-radius: 5px;
42-
border:0;
43-
background-color: #212121;
44-
color:white;
45-
cursor:pointer;
46-
}
47-
.scrollY .img{
48-
width:25%;
49-
float:left;
50-
}
51-
.scrollX .img{
52-
width:25%;
53-
display: inline-block;
54-
margin-top:0px;
55-
}
56-
.notice{
57-
background-color: #212121;
58-
color:white;
59-
}
60-
</style>
4+
<meta charset="UTF-8">
5+
<title>Example Test</title>
6+
<style>
7+
* {
8+
margin: 0;
9+
padding: 0;
10+
}
11+
12+
#App {
13+
padding-top: 50px;
14+
}
15+
16+
.notice {
17+
padding: 10px;
18+
font-size: 14px;
19+
}
20+
21+
.scrollY {
22+
position: relative;
23+
width: 100%;
24+
max-height: 46vh;
25+
overflow: auto;
26+
margin-bottom: 5px;
27+
}
28+
29+
.scrollX {
30+
width: 100%;
31+
white-space: nowrap;
32+
overflow-x: auto;
33+
}
34+
35+
.header {
36+
position: fixed;
37+
top: 0;
38+
width: 100%;
39+
height: 50px;
40+
background-color: #0097A7;
41+
z-index: 1;
42+
}
43+
44+
.header .addBtn {
45+
margin: 7px;
46+
padding: 10px 15px;
47+
border-radius: 5px;
48+
border: 0;
49+
background-color: #212121;
50+
color: white;
51+
cursor: pointer;
52+
}
53+
54+
.scrollY .img {
55+
width: 25%;
56+
float: left;
57+
}
58+
59+
.scrollX .img {
60+
width: 25%;
61+
display: inline-block;
62+
margin-top: 0px;
63+
}
64+
65+
.notice {
66+
background-color: #212121;
67+
color: white;
68+
}
69+
</style>
6170
</head>
6271
<body>
6372
<div id="App">
64-
<div class="header">
65-
<button class="addBtn" @click="addImageY">Add image in scroll-Y</button>
66-
<button class="addBtn" @click="addImageX">Add image in scroll-X</button>
67-
</div>
68-
<div class="notice">Y方向滚动懒加载</div>
69-
<div class="scrollY">
70-
<lazy-image class="img" v-for="item in itemsY" :src="item" :placeholder="placeholder"></lazy-image>
71-
</div>
72-
<div class="notice">X方向滚动懒加载</div>
73-
<div class="scrollX">
74-
<lazy-image class="img" v-for="item in itemsX" :src="item" :placeholder="placeholder"></lazy-image>
75-
</div>
73+
<div class="header">
74+
<button class="addBtn" @click="addImageY">Add image in scroll-Y</button>
75+
<button class="addBtn" @click="addImageX">Add image in scroll-X</button>
76+
</div>
77+
<div class="notice">Y方向滚动懒加载</div>
78+
<div class="scrollY">
79+
<lazy-image class="img" v-for="item in itemsY" :src="item" :placeholder="placeholder"></lazy-image>
80+
</div>
81+
<div class="notice">X方向滚动懒加载</div>
82+
<div class="scrollX">
83+
<lazy-image class="img" v-for="item in itemsX" :src="item" :placeholder="placeholder"></lazy-image>
84+
</div>
7685
</div>
7786
<script src="../dist/example.js"></script>
7887
</body>

0 commit comments

Comments
 (0)