lazy-load-img


A library of lazy load image when it is necessary.

Usage

``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



`

API

$3

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

$3

when new img is append, init and new img will be render on necessary.

$3

render img by yourself, but as usual you needn't use it, because it is automatic.

Build Setup

` bash


serve with hot reload at localhost:5000

fle dev

build for production with minification

fle build
``

For detailed explanation, consult the docs for fle-cli.