A library of lazy load image when it is necessary.
npm install @axe/lazy-load-img
A library of lazy load image when it is necessary.
``js
import LazyLoadImg from '@axe/lazy-load-img'
const clientWidth = document.documentElement.clientWidth
const lazy = new LazyLoadImg({
el: '#root',
lazyOffsetTop: 500,
placeholderImg: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522823157174&di=1e111a44baa77ea6c6940bac60418607&imgtype=0&src=http%3A%2F%2Fpic2.16pic.com%2F00%2F20%2F02%2F16pic_2002642_b.jpg',
onImgLoad (img, w, h) {
img.style.width = clientWidth + 'px'
img.style.height = (clientWidth * h / w) + 'px'
}
})
// when new img is append, query img again.
// lazy.init()
// trigger img render by yourself
// lazy.update()
`
`html`










It will find img with data-src by default.
options
* el: [HTMLElement|string] -> '#id', '.class'
* scrollEl: [HTMLElement|string] -> '#id', '.class'
* lazyOffsetTop = 0: [number] load img when scrollTop less than view area
* placeholderImg: [string] ensure placeholderImg already loaded before load real img
* cutTime: [number] throttle wait time
* onImgLoad: [function] when a img loaded, it will be trigger
* img: HTMLElement
* originalWidth: img width
* originalHeight: img height
when new img is append, init and new img will be render on necessary.
render img by yourself, but as usual you needn't use it, because it is automatic.
` bashserve with hot reload at localhost:5000
fle dev
For detailed explanation, consult the docs for fle-cli.