ygtzz / lazyload

a image lazyload component

LazyLoad

a component to lazyload images

Feature

1. wirtten in native javascript
2. use intersectionObserver when support, fallback listen scroll event to check image's getBoundingClientRect
3. use debounce to decrease scroll event
4. when load image, remove image from observe
5. when all images loaded, remove observer or scroll event
6. defer load images when use data-defer

Installation

npm i my-lazyload -S

Usage

<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
})

Params

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