meooxx / rc-lazyload-img

react, component , lazyload-image

react lazy load(preview!!)

feature

• it leverages intersetion-observer Api w3c
• ligthweigth and flexible script
• jsx
• outbox
• client & server
• background-img

pr welcome !!

install

npm i rc-lazyload-img
# or yarn add -D rc-lazyload-img
# react 15/16 required

usage

props	type	default	des
src	string	1*1 image(base64)	as small as possible
dataBGImg	string	' '	style.background-img = dataBGImg
holder	string	1*1 image(base64) img element	placeholder of img(as small as possible)
...ImgHTMLAttributes	any		any other <img / >'s propterty

demo online

   ...
  import LoadImg from 'rc-lazyload-img' 
  ...
  <LoadImg src='www.example.com/pic1.png' />
  <LoadImg dataBGImg="www.example.com/pic2.png" />
  <LoadImg 
    style={{styles}}
    dataBGImg="www.example.com/pic2.png" />
  <LoadImg 
    onError={handleOnError}
    dataBGImg="www.example.com/pic2.png" />
  ...