@@ -97,8 +97,9 @@ new Vue({
97
97
| ` attempt ` | attempts count| ` 3 ` | ` Number ` |
98
98
| ` listenEvents ` | events that you want vue listen for| ` ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove'] ` | [ Desired Listen Events] ( #desired-listen-events ) |
99
99
| ` adapter ` | dynamically modify the attribute of element | ` { } ` | [ Element Adapter] ( #element-adapter ) |
100
- | ` filter ` | the image's src filter | ` { } ` | [ Image url filter] ( #image-url -filter ) |
100
+ | ` filter ` | the image's listener filter | ` { } ` | [ Image listener filter] ( #image-listener -filter ) |
101
101
|` lazyComponent ` | lazyload component | ` false ` | [ Lazy Component] ( #lazy-component )
102
+ | ` dispatchEvent ` | trigger the dom event| ` false ` | ` Boolean ` |
102
103
103
104
### Desired Listen Events
104
105
@@ -120,25 +121,26 @@ This is useful if you are having trouble with this plugin resetting itself to lo
120
121
when you have certain animations and transitions taking place
121
122
122
123
123
- ### Image url filter
124
+ ### Image listener filter
124
125
125
126
dynamically modify the src of image
126
127
127
128
``` javascript
128
129
Vue .use (vueLazy, {
129
130
filter: {
130
- webp ({ src } ) {
131
+ progressive ( listener , options ) {
131
132
const isCDN = / qiniudn. com/
132
- if (isCDN .test (src)) {
133
- src += ' ?imageView2/2/format/webp'
133
+ if (isCDN .test (listener .src )) {
134
+ listener .el .setAttribute (' lazy-progressive' , ' true' )
135
+ listener .loading = listener .src + ' ?imageView2/1/w/10/h/10'
134
136
}
135
- return src
136
137
},
137
- someProcess ({ el, src }) {
138
- if (el .getAttribute (' large' )) {
139
- src += ' ?large'
140
- }
141
- return src
138
+ webp (listener , options ) {
139
+ if (! options .supportWebp ) return
140
+ const isCDN = / qiniudn. com/
141
+ if (isCDN .test (listener .src )) {
142
+ listener .src += ' ?imageView2/2/format/webp'
143
+ }
142
144
}
143
145
}
144
146
})
0 commit comments