@@ -97,8 +97,9 @@ new Vue({
9797| ` attempt ` | attempts count| ` 3 ` | ` Number ` |
9898| ` listenEvents ` | events that you want vue listen for| ` ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove'] ` | [ Desired Listen Events] ( #desired-listen-events ) |
9999| ` 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 ) |
101101|` lazyComponent ` | lazyload component | ` false ` | [ Lazy Component] ( #lazy-component )
102+ | ` dispatchEvent ` | trigger the dom event| ` false ` | ` Boolean ` |
102103
103104### Desired Listen Events
104105
@@ -120,25 +121,26 @@ This is useful if you are having trouble with this plugin resetting itself to lo
120121when you have certain animations and transitions taking place
121122
122123
123- ### Image url filter
124+ ### Image listener filter
124125
125126dynamically modify the src of image
126127
127128``` javascript
128129Vue .use (vueLazy, {
129130 filter: {
130- webp ({ src } ) {
131+ progressive ( listener , options ) {
131132 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'
134136 }
135- return src
136137 },
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+ }
142144 }
143145 }
144146})
0 commit comments