0.0.22 • Published 6 years ago
lazi v0.0.22
Lazi
Lazy loading images.
Features
- passive
- IntersectionObserver
Install
$ npm install --save lazi
// using ES6 modules
import lazi from 'lazi'
// using CommonJS modules
var lazi = require('lazi')
The UMD build is available on unpkg:
<script src="https://unpkg.com/lazi/dist/lazi.umd.js"></script>
Usage
import lazi from 'lazi'
lazi()
<img data-lazi-src="a.png" />
<div data-lazi-src="a.png" data-lazi-bg></div>
API
var instance = lazi({threshold: 1, strategy: 2})
instance.add().load()
instance.add('data-src', 3).load()
strategies
- IntersectionObserver: 0
- throttle: 1
- requestAnimationFrame: 2
events
- loading
- done
- error
- pre
options({src, threshold, strategy, timeout})
Reset default configs:
src
reset default src prop (default:data-lazi-src
)threshold
reset default threshold (default:1
)strategy
reset default strategy (default order: 0 -> 1)timeout
reset throttle timeout (default:150
)
add(srcprop, threshold)
Add new dom elements into lazy queue:
srcprop
Lazy src property (eg.<img data-src="xx.png" />
)threshold
How far to preload for current elements.
load()
load()
Normally, after adding new elements, a new reload need be triggered.
While if we are in intersection mode, no need to reload.
on(event, selector, handler)
var fn = () => {}
instance.on('done', fn)
instance.on('done', 'data-a1', fn)
off(event, selector, handler)
instance.off('done')
instance.off('done', fn)
instance.off('done', 'data-a1')
instance.off('done', 'data-a1', fn)
emit(event, ...args)
instance.emit('done')
instance.emit('done.data-a1')
pipe(event, handler)
instance.pipe('pre.data-a1', fn)
instance.pipe('pre.data-a1')
Todos
- check element type
support background-image- config loadElm
- ...