a component to lazyload images
- wirtten in native javascript
- use intersectionObserver when support, fallback listen scroll event to check image's getBoundingClientRect
- use debounce to decrease scroll event
- when load image, remove image from observe
- when all images loaded, remove observer or scroll event
- defer load images when use data-defer
npm i my-lazyload -S<img src="images/defalut.png" data-src="images/real.jpg" data-defer="5000"/>import {LazyLoad} from 'my-lazyload';
new LazyLoad({
imgSelector:'img[data-src]',
threshold:100
})| Parameter | Type | Default | Description |
|---|---|---|---|
| data-src | string |
image's attr to store url | |
| data-defer | number |
image's load after defer time, not scroll | |
| imgSelector | string |
img[data-src] | the images selector, used in document.querySelectorAll |
| thresold | number |
0 | how pixels before viewport to load images |
| container | function |
window | the callback function after toast hide |